在Angular指令的隔离范围内定义函数

Question

我正在编写一个自定义<pagination>指令,它将返回负责更改当前页面和分页设置的元素(例如,每页将显示多少项).该指令具有隔离范围(使其更具可重用性).

在指令模板中,我需要调用像changePage()或的函数changePaginationSettings().在目前为止我发现的隔离范围内传递函数的唯一方法是在控制器中定义函数.

mainController.js

module.controller("mainController", function($scope) {
    $scope.changePage = function() { ... };
});

然后将其作为属性传递给指令:

pagination.js

module.directive("pagination", function() {
    return {
        restrict: "E",
        scope: {
           changePage: "="
        },
        templateUrl: "templates/pagination.html"
    }
}

pagination.html

<pagination change-page="changePage">

这看起来非常难看,因为它将相关代码拆分为2个不相关的文件.那个changePage()函数应该在pagination.js文件中定义,而不是在mainController.js中定义.

我认为这样的事情应该是可能的:

pagination.js

module.directive("pagination", function() {
    function changePage() { ... };

    return {
        restrict: "E",
        scope: {
           changePage: changePage
        },
        templateUrl: "templates/pagination.html"
    }
}

但是这样的代码产生了一个(对我来说毫无意义)错误:Error: definition.match is not a function.

有没有办法实现这一目标？我的意思是在隔离的指令范围内传递在同一文件中定义的函数.

我已经阅读过AngularJS Directive Docs,但他们甚至没有列出scope指令对象中的合法值,只给出一些"=","&"和"@"示例.

Answer 1

用于分离的范围对象定义的唯一的合法值是与开始字符串&,@或=.(如果您希望属性名称在指令中有所不同,也可以在父作用域上使用属性名称跟随这些符号^.1)在此实例中,您希望使用=符号,因为这表明Angular应该"绑定changePage在changePage父范围的指令范围".请查看此答案以获取更多详细信息.

你通过指令中的属性传递这个函数是很难的,但是这是具有隔离范围的本质.您可以考虑changePage在服务中使用其他相关方法,然后将其作为依赖项注入.

编辑

如果没有隔离范围,您可以执行以下操作:

module.directive("pagination", function() {    
    return {
        restrict: "E",
        templateUrl: "templates/pagination.html",
        link: function(scope, elem, attrs) {
            // scope.changePage is available from the directive's parent $scope
        }
    }
}

¹示例:{ 'nameInDirective': '=nameOnParent' }