보기에서 ngModel 참조가 여러 번 호출됩니다.

Question

1. 동일한 뷰에서 지시문을 두 번 사용합니다.
2. 각 지시어에서 필자는 필드와 ul 목록이있는 템플릿을 호출합니다.
3. 사용자가 무언가를 쓸 때 결과 배열을 반환하는 API를 호출합니다.
4. 이 배열은 ng-repeat (ul)를 통해 목록을 표시하는 데 사용됩니다.

문제 : 첫 번째 (첫번째 지시어를)로드 분야에서 뭔가 쓰는 사용자가 호출되는 NG-반복 두 번째 지침에 합니다.

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

하십시오

<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'} 
      ]; 
     }; 
    } 
} 

, 첫 번째 필드에 뭔가를 쓰기는 결과 상자가 두 번째 필드 아래에 표시됩니다. 왜 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