ngModel Referenz in der Richtlinie aufgerufen mehrere Zeit von Sicht

Question

1. Ich benutze eine Direktive zweimal in der gleichen Ansicht.
2. In jeder Anweisung rufe ich eine Vorlage mit einem Feld und einer UL-Liste.
3. Wenn der Benutzer etwas schreibt, rufe ich API, die mir eine Array von Ergebnissen zurückgibt.
4. Dieses Array wird für die Anzeige einer Liste über ng-repeat (ul) verwendet.

Das Problem: Wenn ein Benutzer etwas auf das Gebiet zu schreiben, die erste (erste Richtlinie) geladen wird, die ng-Wiederholung, die in der zweiten Richtlinie genannt wird, ist.

<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/

Bitte, etwas in dem ersten Feld schreibt, wird das Ergebnis Feld unter dem zweiten Feld angezeigt. Warum bezieht sich die ul nicht auf ihre eigene Richtlinie?

Answer 1

Das passiert, weil Sie Ihre Suchfunktion außerhalb des isolierten Bereichs der Richtlinie definieren. Um Ihren Code Arbeit machen müssen Sie Funktion in ihrem Umfang so definieren:

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

Während Sie isoliert Umfang Fehler in Ihrer Funktion zu verwenden, braucht es zuletzt Umfang zur Verfügung Anrufer (Funktionsdefinition zweimal für Ihr Beispiel genannt werden), so dass die Funktion zweimal neu definiert wird und die zweite Definition mit isoliertem Bereich von der zweiten Instanz der Direktive aufgerufen wird, die in beiden Aufrufen verwendet wird.

Answer 2

Die Deklaration der Suchfunktion vor $ watch verschieben.

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