從自定義指令內部調用angular UI Bootstrap指令

Question

目前我正在研究一種非常誇張的形式，並在HTML上使用輸入，textareas，datepickers等等，這將使代碼看起來非常難看，也很難閱讀。 問題是我創建了自定義指令，返回正確的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'}將這些變量用於指令內的綁定。