angularjs - 如何从内联 Controller 中定义的指令访问函数

Question

如果我有一个指令，它在其主体中定义了自己的 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 部分，我试图访问 Controller 中定义的函数 save() 和 cancel()。

现在点击这些按钮没有任何反应。

I really don't want to define save() and cancel() in the $scope, because only this directive is supposed to use them. Or maybe it is ok to make them being in the $scope? Not sure about that isolation.

问:我该如何实现？一些常见的解决方案/愿景？

Answer 1

您需要将 save() 和 cancel() 放在指令的范围内，以便模板可以看到它们(目前它们仅在 Controller 函数内可见).

所以代替:

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

你想要

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

这些在指令范围内就可以了。这不像将它们放在全局的 $rootScope 上。

您会注意到我将此添加到您的指令中:

scope: {},

这使得这个 $scope 仅限于这个指令(又名“隔离范围”)。因此，您可以将其视为一个对象或函数作用域 - 您不会污染全局命名空间。

这是一个演示:http://jsfiddle.net/uLfLM/1/