如何从内联控制器中定义的指令到达函数

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/