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

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

隔离范围对象定义的唯一合法值是以&、@ 或= 开头的字符串。 （如果您希望属性名称在指令中有所不同，您也可以在这些符号后面加上父作用域上的属性名称。¹）在这种情况下，您要使用 = 符号因为这表明 Angular 应该“将指令作用域上的 changePage 绑定到父作用域上的 changePage”。更多详情请查看this answer。

你是对的，通过指令上的属性传递这个函数是很丑陋的，但这是具有隔离作用域的本质。您可以考虑在服务中使用 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' }

Answer 2

当用户 sdgluck 正确回答时，您可以在链接函数中扩展指令范围，从而保持您的代码干净和独立。以下示例更完整一些，但归结为相同的结果。它允许您定义一个元素，如下所示。 请注意，所有属性都被解释为对象，并且，如果您想传递一个字符串值，您必须在该值周围加上额外的引号（否则您将获得该属性的未定义值）

<my-button someattr="'my text'"></my-button>

angular.module('test', []);

angular.module('test').controller('testctrl', function($scope) {
  $scope.someValue = '';
});

angular.module('test').directive('myButton', function() {
  return {
    restrict: 'E',
    template: '<button>{{getText()}}</button>',
    replace: true,
    scope: {
      someattr: '='
    },
    link: function(scope, elements, attrs){
      scope.getText = function(){
        return scope.someattr;
      };
    }
  }
});

Answer 3

这里有一个示例配置。

主控制器

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

假设它是index.html，你应该有这样的指令

<pagination change-page="changePage()">

你的指令应该如下所示

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

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

还有你的 pagination.html

<div ng-click="changePage()"></div> 

这将绑定到您的主控制器的changePage 函数。

Answer 4

我遇到了同样的问题，我在自定义指令中定义了我的函数，而不是在控制器中定义函数。 在这里你可以看到一个例子：

您的 HTML：

<my-custom-directive></my-custom-directive>

你的指令定义：

.directive("myCustomDirective", myCustomDirectiveHanlder)

function myCustomDirectiveHandler() {
    return {
        templateUrl: "/app/templates/myCustomDirectiveTemplate.html",
        restrict: 'E',
        link: function (scope, elements, attrs) {
            //your code here
        }
    }
};