指令中的 ngModel 引用被视图多次调用

Question

我在同一个视图中使用指令两次。
在每个指令中，我调用一个带有字段和 ul 列表的模板。
当用户写东西时，我称 API 其中 returns 我结果数组。
此数组用于通过 ng-repeat (ul) 显示列表。

问题： 如果用户在首先加载的字段中写入内容（第一个指令），则调用的 ng-repeat 在第二个指令中。

<div style="padding: 20px;">
    <p>First directive :</p>
    <span search-box ng-model="toto"></span>
    <hr>
    <p>Second directive :</p>
    <span search-box ng-model="titi"></span>
</div>

myApp.directive('searchBox', [function() {
return {
    restrict: 'A',
    scope: {
      model: '=ngModel',
    },        
    template: ''
    +'<div>'
    +       '<input type="text" ng-model="model" />'
    +       '<ul style="background-color:#e1e1e1; width: 142px; padding: 15px;" ng-show="cities.length">'
    +'          <li ng-repeat="city in cities">'
            +'                  {{city.label}}'
    +'          </li>'
    +     '</ul>'
    +'</div>',
    replace: true,
    transclude: true,
    link: function(scope, element, attrs, ngModel) {

                    scope.cities = [];

                    scope.$watch('model', function (newValue, oldValue) { if(newValue != oldValue && newValue.length > 0) search(newValue) });

                    search = function(input) {
                scope.cities = [
              {label: 'Paris'}, 
              {label: 'London'}, 
              {label: 'New York'}, 
              {label: 'Berlin'}, 
              {label: 'Lisbonne'}
            ];
        };
    }
}

http://jsfiddle.net/hNTrv/10/

请在第一个字段中输入内容，结果框显示在第二个字段下方。为什么 ul 不引用它自己的指令？

Answer 1

发生这种情况是因为您在指令的隔离范围之外定义了搜索函数。为了使您的代码工作，您需要在范围内定义函数，如下所示：

scope.$watch('model', function (newValue, oldValue) { if(newValue != oldValue && newValue.length > 0) scope.search(newValue) });

                scope.search = function(input) {
            scope.cities = [
          {label: 'Paris'}, 
          {label: 'London'}, 
          {label: 'New York'}, 
          {label: 'Berlin'}, 
          {label: 'Lisbonne'}
        ];
    };

虽然您未能在函数中使用独立作用域，但它使用了调用者可用的最后一个作用域（您的函数定义在您的示例中被调用了两次），因此函数被重新定义了两次，并且第二个定义在第二个独立作用域中被调用在两个调用中使用的指令实例。

Answer 2

将搜索函数的声明移到 $watch 之前。

scope.cities = [];
var search = function(input) {
    scope.cities = [
      {label: 'Paris'}, 
      {label: 'London'}, 
      {label: 'New York'}, 
      {label: 'Berlin'}, 
      {label: 'Lisbonne'}
    ];
};
scope.$watch('model', function (newValue, oldValue) { if(newValue != oldValue && newValue.length > 0) search(newValue)});

JSFiddle

指令中的 ngModel 引用被视图多次调用

ngModel reference in directive called multiple time by view

directive

angularjs

angular-ngmodel