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/

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

1 个答案: