Come raggiungere una funzione da una direttiva definita nel controller in linea

Question

Se ho un directive, che ha il proprio controller definito nel suo corpo:

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 una sezione template sto cercando di raggiungere le funzioni save() e cancel() che sono definite nel controller.

Per ora non funziona facendo clic su quei pulsanti non succede nulla.

.

Non voglio davvero definire save() e cancel() nel $scope, Perché solo questa direttiva dovrebbe usarle.O forse È OK per farli essere nel $scope?Non sono sicuro Isolamento.

Q: Come posso raggiungerlo?Qualche soluzione comune / visione a riguardo?

Answer 1

È necessario inserire save() e cancel() sullo scopo della direttiva in modo che il modello possa vederli (in questo momento sono visibili solo all'interno della funzione del controller).

Quindi invece di:

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

.

vuoi

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

.

Va bene per questi essere sulla portata della direttiva.Non è come metterli su $rootScope che è globale.

Noterai che ho aggiunto alla tua direttiva:

scope: {},

.

che rende questo $scope limitato a questa direttiva (aka "scope isolato").Quindi puoi pensare a questo come un oggetto o un'opposizione funzione, non stai inquinando lo spazio dei nomi globali.

Ecco una demo: http://jsfiddle.net/ulflm/1/