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

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？不确定那种隔离.

问:我怎样才能实现它？一些常见的解决方案/愿景？

Answer 1

你需要把save()和cancel()对指令的范围,所以,模板可以看到他们(现在他们只是在控制器函数内部可见).

所以代替:

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

你要

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

这些都适用于指令范围.这不是把它们放在$rootScope全球范围内.

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

scope: {},

这使得这$scope仅限于此指令(AKA"隔离范围").因此,您可以将其视为对象或函数范围 - 您不会污染全局命名空间.

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