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

创建可重复使用时components/widgets/directives创建isolateScope。

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

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

有关 isolateScope 的更多信息来自 angular 文档。

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

Note: Normally, a scope prototypically inherits from its parent. An isolated scope does not. See the "Directive Definition Object - scope" section for more information about isolate scopes.

Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app.

AngularJS 指令数据正在被覆盖

AngularJS directive data is being overwritten

javascript

templates

overwrite

angularjs

angularjs-directive