Позвоните в угловую директиву Bootstrap из внутренней настраиваемой директивы

Question

В настоящее время я работаю над очень расширенной формой и с помощью входов, текстовых полей, датпикеров и т. Д. И т. Д. На HTML это сделает код очень уродливым, а также очень трудно читать. Дело в том, что я создал собственные директивы, которые возвращает правильный HTML элемент, например:

В HTML

<suggest-input data-ng-model="EDCtrl.headerStep.provider.identification" 
       placeholder="'Ej. 888888-8'" 
       label="'Identificador de emisor'"> 
</suggest-input> 

директива:

var suggestInput = function ($compile, $http) { 
    return { 
    restrict: 'E', 
    require: 'ngModel', 
    templateUrl: templates + '/suggestInputTemplate.tpl.html', 
    replace: true, 
    scope: { 
     model: '=ngModel', 
     label: '=label', 
     title: '=title', 
     placeholder : '=placeholder' 
    }, 
    }; 
}; 

шаблон

<div> 
    <label>{{ label }}</label> 
    <input class="form-control" data-ng-model="model" placeholder="{{ placeholder }}" call="functionName()"/> 
</div> 

, и у меня возникли проблемы с использованием директивы углового бутстрепа в сторонняя моя пользовательская директива, например: Как я могу назвать «uib-typeahead», используя эту конфигурацию в моих пользовательских директивах?

Любые идеи?

Answer 1

Вы можете использовать любую вложенную директиву внутри своей собственной, а директивы angular-ui-boostrap не являются особыми в этом случае. Что касается uib-typeahead вы можете увидеть следующий пример на angular-ui-bootstrap сайте:

<input type="text" ng-model="asyncSelected" 
    placeholder="Locations loaded via $http" 
    uib-typeahead="address for address in getLocation($viewValue)" 
    typeahead-loading="loadingLocations" 
    typeahead-no-results="noResults" class="form-control"> 

Единственная важная вещь, чтобы знать, что ngModel является сама директива, и вы можете получить доступ к нему через link(scope, element, attrs,ngModelController). ngModelController имеет $viewValue и $modelValue свойства, которые представляют собой связанное значение из внешней области. поэтому вместо scope:{model:'=ngModel'} используйте эти переменные для привязок внутри вашей директивы.