从自定义指令内部调用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'}将这些变量用于指令内的绑定。