angularjs - 我是否需要将 Controller 与 angularjs 中的类似组件的指令分开

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函数定义方法的正确位置还是创建单独的 Controller 对象更好，使用 ng-controller并在那里定义方法？

Answer 1

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

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

    }
}
});

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

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