AngularJS 指令数据被覆盖

Question

我已经制作了自己的预先输入指令，该指令会自动填充一些名称。我在我的页面上以两种不同的模式有相同的预先输入。其中一个需要获取每个名称，而另一个只需要获取一些名称。哪个预先输入的数据最后加载会写入第一个预先输入的数据。因此，如果我加载应该首先获得一些名称的那个，然后是第二个获得所有名称的那个。他们俩都抓住了所有的名字。

任何帮助将不胜感激。

这是我的指令：

templates.directive("referralTypeAhead", function (Referrals,AlertFactory) {
return {
restrict:"EA",
replace: true,
require:'ngModel',
// scope: {everyone: "@"},
template: '<input type="text" typeahead="patient.id as patient.plast + \', \' + patient.pfirst + \' \' + patient.mi for patient in patients | filter:$viewValue | limitTo:8" typeahead-min-length="3" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" class="form-control" />',
link: function(scope, element, attrs, ngModel) {

        var every = attrs.everyone ? attrs.everyone : "false";
        if (everyone === "false") {
          Referrals.getSomeNames({everyone:every}).$promise.then(function(result) {
            var patients = result;
            for (var i = 0; i < patients.length; ++i) {
              if (!patients[i]['mi']) {
                patients[i]['mi'] = '';
              }
            }
            scope.patients = patients;
          },function(result) {
            AlertFactory.addAlert('warning','ERROR: Unable to load data for the referral-type-ahead');
          });
        }
        else {
          Referrals.getAllNames({everyone:every}).$promise.then(function(result) {
            var patients = result;
            for (var i = 0; i < patients.length; ++i) {
              if (!patients[i]['mi']) {
                patients[i]['mi'] = '';
              }
            }
            scope.patients = patients;
          },function(result) {
            AlertFactory.addAlert('warning','ERROR: Unable to load data for the referral-type-ahead');
          });
        }

        scope.formatLabel = function(model) {
          if (scope.patients) {
            for (var i = 0; i < scope.patients.length; ++i) {
              if (scope.patients[i].id == model) {
                return scope.patients[i].plast + ', ' + scope.patients[i].pfirst + ' ' + scope.patients[i].mi;
              }
            }
          }
        };
     }
   };
});

这是我的html：

<referral-type-ahead everyone="false" ng-model="patient.id"></referral-type-ahead>

<referral-type-ahead everyone='true' ng-model="patient.id"></referral-type-ahead>

我不明白为什么第二组数据会覆盖第一组。

Answer 1

当您创建可重用的组件/小部件/指令时，请创建isolateScope。

在你的指令定义中声明scope: {}

每次使用该指令都会创建私有的、非共享的范围。

角度文档中有关isolateScope 的更多信息。

顾名思义，指令的isolate作用域就是isolates 除了您明确添加到范围的模型之外的所有内容：{} 哈希对象。这在构建可重用组件时很有帮助，因为 它可以防止组件更改您的模型状态，除了 您明确传入的模型。

注意：通常，作用域原型继承自其父级。一个 隔离范围没有。请参阅“指令定义对象 - 范围” 部分了解有关隔离范围的更多信息。

最佳实践：在以下情况下使用范围选项创建隔离范围 制作您希望在整个应用中重复使用的组件。