Die Controller-Funktion wird nicht mit ng-click aufgerufen, wenn ich Daten an einen isolierten Bereich übergebe

Question

Ich versuche, 3 Komponenten mit einem allgemeinen Controller zu verbinden, der alle verbindet: Länder, Regionen und Städte. Jede Komponente ist ein Dropdown-Menü mit markierten Daten, wenn ich wähle, wann die Option des ersten Dropmenüs angezeigt wird, muss die zweite die Daten anzeigen, die mit der gewählten Option assoziiert sind.

Das Problem ist, dass ich wiederverwendbare Komponenten machen will, so dass das Array mit den Informationen von der allgemeinen Steuerung kommt. Wenn die Information innerhalb des Component-Controllers ist und ich eine Option auswähle, ruft ng-click die darin definierte Funktion auf und alles funktioniert gut, aber wenn die Array-Daten aus dem Scope kommen, wird die Funktion nicht aufgerufen ... ich dachte, das wäre a Problem der Referenzen und eckig war die Suche nach der Funktion in der Supraleiter aber keine ...

Was ist los? Danke für alles!

RegionComponent JS

'use strict'; 
angular.module('regionModule', []) 
.directive('regionDirective', function() { 
    return { 
     restrict: 'E', 
     controller: 'regionController', 
     scope:{ 
      data : '=', 
      'region': '=' 
     }, 
     link: function ($scope) { 
      $scope.regionHasBeenSelected = function (data) { 
       $scope.region(data); 
      }; 
     }, 
     templateUrl: 'scripts/directives/regionModule.html' 
    }; 
}) 
.controller('regionController', function ($scope) { 
    this.regionList = $scope.data; 
    console.log('Region List is ' + $scope.data); 

    this.selectRegion = function (id) { 
     for (var x in this.regionList) { 
      if (this.regionList[x].tag == id) { 
       console.log(this.regionList[x].name + ' selected'); 
       $scope.regionHasBeenSelected(this.regionList[x].tag); 
      } 
     } 
    }; 

}); 

RegionComponent HTML

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Region 
    <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li ng-repeat="region in data"> 
     <a ng-click='controller.selectRegion(region.tag)'>{{region.name}}</a> 
    </li> 
</ul> 

Hier ist ein Plunkr mit dem Code: Plunkr

Entschuldigung für die Fehler, ist das erste Mal, dass ich ein ^^

Answer 1

erstellen Um die Referenz einer Funktion zu übergeben, müssen Sie '&' und nicht '=' verwenden. '=' steht für 2-Wege-Datenbindung und '&' wird für die Übergabe der externen Funktionsreferenz verwendet.