Aufruf der Funktion für den übergeordneten Bereich der Direktive mit dem Argument für den Direktivenbereich

Question

Ich entwickle eine Direktive, die den Inhalt basierend auf einem in der Vorlage definierten Klickereignis (ng-click) anzeigt und versteckt. Bei einigen Ansichten, in denen die Direktive verwendet wird, möchte ich wissen, ob die Direktive den Inhalt anzeigt oder versteckt, damit ich auf die DOM-Änderungen reagieren kann. Die Richtlinie hat einen isolierten Geltungsbereich und ich versuche, den übergeordneten Bereich zu informieren, wenn die Richtlinie "umgeschaltet" wurde. Ich versuche, dies zu erreichen, indem ich eine Callback-Funktion an die Direktive übergebe, die aufgerufen werden kann, wenn sich der Status der Direktive ändert, dh ob sie ausgeblendet ist oder nicht der Direktive (versteckt oder gezeigt) wird im isolierten Bereich der Direktive gespeichert und nach dem ng-Klick bestimmt. Daher muss ich die Funktion des übergeordneten Bereichs innerhalb der Direktive aufrufen und nicht die Sicht übernehmen.

Dies wird WAAY mit einem Beispiel sinnvoller machen. Hier ist ein plunked zeigen, was ich tun möchte:

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[]) 

app.controller('MainController', function($scope){ 
    $scope.myValue = 'test value'; 
    $scope.parentToggle = function(value){ 
    $scope.myValue = value; 
    }; 
}); 

app.directive('toggle', function(){ 
    return { 
      restrict: 'A', 
      template: '<a ng-click="toggle();">Click Me</a>', 
      replace: true, 
      scope: { 
       OnToggle: '&' 
      }, 
      link: function($scope, elem, attrs, controller) { 
       $scope.toggleValue = false; 
       $scope.toggle = function() { 
        $scope.toggleValue = !$scope.toggleValue; 
        $scope.OnToggle($scope.toggleValue) 
       }; 
      } 
     }; 
}); 

Ich bin relativ neu in Angular. Ist das eine schlechte Idee? Sollte ich einen Service oder etwas verwenden, anstatt Funktion Refs herumzugeben?

Danke!

Answer 1

aktualisieren

Sie auch & zu binden, um die Funktion des Stammbereich (das ist eigentlich der Zweck der &) verwenden können.

Dazu muss die Richtlinie leicht geändert werden:

<div toggle="parentToggle(message)"></div> 

Plunk

---

Sie die Funktion mit = konnte binden:

app.directive('toggle', function(){ 
    return { 
    restrict: 'A', 
    template: '<a ng-click="f()">Click Me</a>', 
    replace: true, 
    scope: { 
     toggle: '&' 
    }, 
    controller: function($scope) { 
     $scope.toggleValue = false; 
     $scope.f = function() { 
     $scope.toggleValue = !$scope.toggleValue; 
     $scope.toggle({message: $scope.toggleValue}); 
     }; 
    } 
    }; 
}); 

Sie mögen diese verwenden können . Stellen Sie außerdem sicher, dass der Eigenschaftsname in Ihrem Bereich und Tag übereinstimmt (AngularJS übersetzt CamelCase in Strichnotation).

Vorher:

scope: { 
    OnToggle: '&' 
} 

Nach:

scope: { 
    onToggle: '=' 
} 

Weiterhin nicht on-toggle="parentToggle({value: toggleValue})" in Ihrer Haupt-Vorlage verwenden. Sie möchten die Funktion nicht aufrufen, sondern nur einen Zeiger der Funktion an die Anweisung übergeben.

Plunk