2

我正在编写用于封装 HTML GUI 或 UI 组件的自定义元素指令。我ng-click在我的函数中添加自定义方法（处理事件等），link例如：

app.directive('addresseseditor', function () {
    return {
        restrict: "E",
        scope: {
            addresses: "="
        }, // isolated scope
        templateUrl: "addresseseditor.html",
        link: function(scope, element, attrs) {

            scope.addAddress= function() {
               scope.addresses.push({ "postCode": "1999" });
           }

           scope.removeAddress = function (index) {
               scope.addresses.splice(index, 1);
           }

        }
    }
});

该link函数是定义方法的正确位置，还是创建一个单独的控制器对象，ng-controller在那里使用和定义方法更好？

4

4 回答 4

3

如果需要，您还可以为每个指令定义一个控制器。主要区别在于指令可以共享控制器（在同一级别），控制器在编译之前执行，并且控制器被注入（因此使用 $）。我认为这是一种公认​​的做法。

app.directive('addresseseditor', function () {
return {
    restrict: "E",
    scope: {
        addresses: "="
    }, // isolated scope
    templateUrl: "addresseseditor.html",
    controller: function($scope, $element, $attrs) {

        $scope.addAddress= function() {
           $scope.addresses.push({ "postCode": "1999" });
       }

       $scope.removeAddress = function (index) {
           $scope.addresses.splice(index, 1);
       }

    }
}
});

您可以同时拥有链接和控制器...但是您想在链接中执行任何 DOM 内容，因为您知道自己已编译。

此方法也保持解耦，因为它仍然是您的指令的一部分。

于 2013-08-07T03:55:41.217 回答
0

如果您将其与控制器和视图永久耦合，那么我会说将它放在哪里并不重要。

但是，如果有一天您想将指令解耦以便可以重用它，请考虑需要包含哪些功能。

于 2013-08-07T03:23:44.753 回答
0

Angular指令指南中写道：

链接函数负责注册 DOM 监听器以及更新 DOM。(...) 这是放置大部分指令逻辑的地方。

只有当我必须编写一个大量操作 DOM 的指令时，我才会遵循该语句的最后一部分。当我的指令所做的只是渲染具有某些功能的模板时，我使用该link函数来执行我需要的任何基本 DOM 操作，并使用该controller函数来封装指令的逻辑。这样我就把事情清楚地分开了（DOM 操作与范围操作），它似乎与“视图控制器”的想法一致。

FWIW，我已经考虑到这些事情实现了我的第一个开源指令，源代码可以在这里找到。希望它可以以某种方式帮助你。

于 2013-08-07T04:15:04.847 回答
0

如果您希望您的元素功能特定于“实例”，请将其放在链接函数中，如果您想跨元素上的指令创建 API，请像 Rowny 大师建议的那样为它创建一个控制器函数。

于 2013-08-07T13:57:49.447 回答