angularjs - 在 Angularjs 指令隔离范围内定义函数

Question

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

在指令模板中，我需要调用像 changePage() 这样的函数或 changePaginationSettings() .到目前为止，在隔离范围内传递函数的唯一方法是在 Controller 中定义函数。

主 Controller .js

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

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

分页.js

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

分页.html

<pagination change-page="changePage">

这对我来说看起来很丑陋，因为它将相关代码拆分为 2 个不相关的文件。那是 changePage()函数应该在 pagination.js 文件中定义，而不是在 mainController.js 中。

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

分页.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 绑定(bind)到父作用域上的 changePage”。看看this answer更多细节。

你是对的，不得不通过指令上的属性传递这个函数是丑陋的，但是这是具有隔离作用域的本质。您可以考虑使用 changePage和服务中的其他相关方法，因为您可以将其作为依赖项注入(inject)。

编辑

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

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
        }
    }
}

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