javascript - 从自定义指令内部调用 Angular UI 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>

我在自定义指令中使用 Angular 引导指令时遇到问题，例如: 如何在自定义指令中使用这种配置来调用“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 属性，它们表示来自外部范围的绑定(bind)值。所以而不是 scope:{model:'=ngModel'} 将这些变量用于指令内的绑定(bind)。