Как получить доступ к функции из директивы, которая определена во встроенном контроллере

Question

Если у меня есть directive, у которого есть свой собственный controller определенный в его теле:

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

В template раздел, в котором я пытаюсь достичь функций save() и cancel() которые определены в контроллере.

На данный момент это не работает, при нажатии на эти кнопки ничего не происходит.

Я действительно не хочу давать определение save() и cancel() в $scope, потому что предполагается, что только эта директива может их использовать.Или, может быть, это нормально, чтобы они находились в $scope?Не уверен насчет этой изоляции.

Q: Как я могу этого достичь?Какое-то общее решение / видение по этому поводу?

Answer 1

Вам нужно поставить save() и cancel() в области видимости директивы, чтобы шаблон мог их видеть (прямо сейчас они видны только внутри функции контроллера).

Так что вместо того, чтобы:

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

Ты хочешь

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

Это нормально, если они находятся в области действия директивы.Это не то же самое, что надевать их $rootScope который является глобальным.

Вы заметите, что я добавил это в вашу директиву:

scope: {},

Это делает это $scope ограничено только этой директивой (она же "изолированная область видимости").Таким образом, вы можете думать об этом как о области видимости объекта или функции - вы не загрязняете глобальное пространство имен.

Вот демо-версия: http://jsfiddle.net/uLfLM/1/