Comment accéder à une fonction à partir d'une directive définie dans le contrôleur en ligne

Question

Si j'ai un directive, qui a le sien controller défini dans son corps :

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() {...}          
        }
    }
}]);

Dans un template section J'essaie d'accéder aux fonctions save() et cancel() qui sont définis dans le contrôleur.

Pour l'instant, cela ne fonctionne pas en cliquant sur ces boutons, rien ne se passe.

Je ne veux vraiment pas définir save() et cancel() dans le $scope, car seule cette directive est censée les utiliser.Ou peut-être que c'est OK de les faire être dans le $scope?Pas sûr de cette isolement.

Question : Comment puis-je y parvenir ?Une solution/vision commune à ce sujet ?

Answer 1

Vous devez mettre save() et cancel() sur la portée de la directive afin que le modèle puisse les voir (pour le moment, ils ne sont visibles que dans la fonction du contrôleur).

Donc au lieu de :

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

Tu veux

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

C'est bien que ceux-ci relèvent du champ d'application de la directive.Ce n'est pas comme les mettre $rootScope qui est mondiale.

Vous remarquerez que j'ai ajouté ceci à votre directive :

scope: {},

Cela fait ceci $scope limité à cette directive (AKA "portée isolée").Vous pouvez donc considérer cela comme une portée d'objet ou de fonction : vous ne polluez pas l'espace de noms global.

Voici une démo : http://jsfiddle.net/uLfLM/1/