So erreichen Sie eine Funktion über eine Direktive, die im Inline-Controller definiert ist

Question

Wenn ich eine habe directive, das hat seine eigene controller in seinem Körper definiert:

directives.directive("formWrapper", ['User','$location',  function(User, $location) {

    return {
       ...
       template: '<div>' +
                   '<input ng-click="cancel()" type="button" value="Cancel"/>' +
                   '<input ng-click="save()" type="button" value="Save" />' +
                  '</div>',

       controller: function($scope, $location, User) {

            $scope.fields = User.get( {username: "username"}  );

            var save = function() {...}

            var cancel = function() {...}          
        }
    }
}]);

In einem template abschnitt Ich versuche, Funktionen zu erreichen save() und cancel() die im Controller definiert sind.

Im Moment funktioniert es nicht, wenn Sie auf diese Schaltflächen klicken, passiert nichts.

Ich möchte wirklich nicht definieren save() und cancel() in der $scope, weil nur diese Richtlinie sie verwenden soll.Oder vielleicht ist es ist in Ordnung, sie dazu zu bringen, in der zu sein $scope?Da bin ich mir nicht sicher Isolation.

Q: Wie kann ich das erreichen?Eine gemeinsame Lösung / Vision dazu?

Answer 1

Sie müssen setzen save() und cancel() im Geltungsbereich der Direktive, damit die Vorlage sie sehen kann (im Moment sind sie nur innerhalb der Controller-Funktion sichtbar).

Also statt:

var save = function() {...}
var cancel = function() {...}  

Du willst

$scope.save = function() {...}
$scope.cancel = function() {...}  

Es ist in Ordnung, wenn diese im Geltungsbereich der Richtlinie liegen.Es ist nicht so, als würde man sie anziehen $rootScope welches ist global.

Sie werden bemerken, dass ich dies zu Ihrer Direktive hinzugefügt habe:

scope: {},

Das macht das $scope beschränkt auf nur diese Richtlinie (AUCH bekannt als "isolierter Geltungsbereich").Sie können sich das also wie einen Objekt- oder Funktionsumfang vorstellen - Sie verschmutzen den globalen Namespace nicht.

Hier ist eine Demo: http://jsfiddle.net/uLfLM/1/