AngularJS：在指令中包装指令答案

【问题标题】：AngularJS: Wrapping directive in a directiveAngularJS：在指令中包装指令
【发布时间】：2014-11-12 13:17:43
【问题描述】：

我将 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 用于演示目的。

【问题讨论】：

我认为这是因为您在包装指令上有一个隔离范围。

标签： angularjs

【解决方案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;
  }
}

【讨论】：

嘿，谢谢。但是我必须询问（如果这不是太多）有关 bindToController 为什么它会覆盖指令范围的任何其他信息？我也会进行研究。这是 Angular 问题还是无意的影响？
我认为这只是意味着使它们相同，因此您的指令范围被绑定为控制器，而不是像 ctrl.model 在这种情况下，但是当您传入隔离范围变量时，您似乎得到一个冲突的双重模型错误。
如果其他人像我一样感到困惑：http: '@exTypeahead' 不需要出于任何特定原因称为“http”。这只是 <ex-typeahead="someURL"> 指令将 someURL 作为范围变量传递给 exTypeaheadController 的一种方式，从控制器的角度来看是 $scope.http。如果我正在实施这个解决方案，我会称它为“src”，然后控制器将改为使用$http.get($scope.src)。如果您阅读 Plunker 的代码，一切都清楚了！
出于某种原因，我注意到bindToController 实际上并没有引起问题。假设，我的指令 ng-model 似乎与 typeahead 的 ng-model 有冲突。这是plunkr of the updated one。