Question

我将ui-bootstrap的typeahead指令包装在另一个指令中，因为我将多次使用相同的代码。例如，我将在应用中使用相同的代码超过7次：

<input type="text" name="name"
    ng-model="thisCtrl.name"
    typeahead="data.name for data in requestHttp($viewValue)"
    typeahead-on-select="thisCtrl.id = $item.id"
    typeahead-template-url="thisTemplate.html>

这是非常冗长和非DRY实施。但是，typeahead似乎无法识别我的ng-model，并且在从下拉列表中选择项目后不会更改。

此处有plnkr用于演示目的。

Answer 1

已更新（ 11/12/14 ）：

假设我的指令与typehead的ng-model发生冲突。 bindToController没有造成任何问题。

请参阅updated plnkr。

旧答案：

你的bindToController使得构造函数有点覆盖指令范围，因此它没有正确绑定。

这是Plunker

function exTypeahead($compile) {
 return {
   scope: {
    http: '@exTypeahead',
    model: '=ngModel'
   },
   restrict: 'A',
   link: linkFn,
   //bindToController: true,
   controllerAs: 'exTypeaheadCtrl',
   controller: 'exTypeaheadController',
   template: '<div><input type="text" ng-model="model" typeahead="data.name for data in exTypeaheadCtrl.request($viewValue)" class="form-control" /></div>',
   replace: true
  };

  function linkFn(scope, element, attr, ctrl) {
    ctrl.http = scope.http;
  }
}

AngularJS：指令中的Wrapping指令

1 个答案: