Question

我正在编写自定义元素指令，用于封装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并在那里定义方法？

Answer 1

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

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的东西，因为你知道你已经编译过了。

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

Answer 2

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

但是，如果您有一天想要解除指令以便重复使用它，那么请考虑需要包含哪些功能。

Answer 3

指令上的Angular guide读取：

链接功能也负责注册DOM侦听器更新DOM。（...）这是大多数指令逻辑的所在将被放。

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

FWIW，我已经实现了我的第一个开源指令，并且可以找到源代码here。希望它能以某种方式帮助你。

Answer 4

如果你想要你的元素功能'实例'特定的把它放在链接函数中，如果你想在一个元素的指令上创建一个API，就像主人Rowny建议的那样创建一个控制器函数。

我是否需要在angularjs中使用与类似组件的指令分开的控制器

4 个答案: