webentwicklung-frage-antwort-db.com.de

Rufen Sie die Funktion für den übergeordneten Anweisungsbereich mit dem Argument für den Anweisungsbereich auf

Ich entwickle eine Direktive, die ihren Inhalt basierend auf einem in ihrer Vorlage definierten Klickereignis (ng-click) anzeigt und verbirgt. In einigen Ansichten, in denen die Direktive verwendet wird, möchte ich wissen, ob die Direktive derzeit ihren Inhalt anzeigt oder verbirgt, damit ich auf die DOM-Änderungen reagieren kann. Die Richtlinie hat einen isolierten Geltungsbereich und ich versuche, den übergeordneten Geltungsbereich zu benachrichtigen, wenn die Richtlinie "umgeschaltet" wurde. Ich versuche, dies zu erreichen, indem ich der Direktive eine Rückruffunktion übergebe, die verwendet wird und aufgerufen werden kann, wenn sich der Status der Direktive ändert, d. H. Ausgeblendet oder angezeigt wird

Ich bin nicht sicher, wie ich das richtig implementieren soll, da der Status der Direktive (ausgeblendet oder angezeigt) im isolierten Gültigkeitsbereich der Direktive gespeichert ist und nach dem Klicken auf ng bestimmt wird. Daher muss ich die Funktion des übergeordneten Bereichs aus der Direktive heraus aufrufen und nicht aus der Sicht heraus.

Dies wird WAAY anhand eines Beispiels sinnvoller machen. Hier ist eine Demonstration, was ich gerne machen würde:

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 für den Anfang? Sollte ich einen Dienst oder etwas verwenden, anstatt Funktionsreferenzen weiterzugeben?

Vielen Dank!

29
Nick

Update

Sie können auch & Verwenden, um die Funktion des Root-Bereichs zu binden (das ist eigentlich der Zweck von &).

Dazu muss die Richtlinie leicht geändert werden:

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 können wie folgt verwenden:

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

Plunk


Sie können die Funktion mit = Binden. Stellen Sie außerdem sicher, dass der Eigenschaftsname in Ihrem Bereich und in Ihrem Tag übereinstimmt (AngularJS übersetzt CamelCase in Strichnotation).

Vor:

scope: {
  OnToggle: '&'
}

Nach:

scope: {
  onToggle: '='
}

Verwenden Sie außerdem nicht on-toggle="parentToggle({value: toggleValue})" in Ihrer Hauptvorlage. Sie möchten die Funktion nicht aufrufen, sondern nur einen Zeiger der Funktion an die Direktive übergeben.

Plunk

50
Sebastian