angularjs - 将函数添加到 $scope 和在指令 Controller 中添加函数之间的区别？

Question

在浏览蛋头视频时，关于 Directive to directive communication 的视频建议我们使用 Controller 向“this”对象添加函数并从其他指令访问它。

视频中使用的完整代码:Adding functions to this object

相关 Controller 代码如下:

controller: function($scope){
        $scope.abilities = [];
        this.addStrength = function(){
            $scope.abilities.push("Strength");
        }

        this.addSpeed = function(){
            $scope.abilities.push("Speed");
        }

        this.addFlight = function(){
            $scope.abilities.push("Flight");
        }
    },

我想知道为什么不将函数添加到“this”，而不是将其添加到 $scope 本身，特别是当我们使用隔离范围时？

将函数添加到$scope的代码:Adding functions to $scope

相关 Controller 代码如下:

controller: function($scope){
        $scope.abilities = [];
        $scope.addStrength = function(){
            $scope.abilities.push("Strength");
        };

        $scope.addSpeed = function(){
            $scope.abilities.push("Speed");
        };

        $scope.addFlight = function(){
            $scope.abilities.push("Flight");
        };
    },

或者为什么要有 Controller 功能。为什么我们不能使用链接函数来达到同样的效果？

在链接函数中将函数添加到$scope:Using link funtciont instead of controller

相关 Controller 及链接函数如下:

controller: function($scope){
        $scope.abilities = [];
        $scope.addStrength = function(){
            $scope.abilities.push("Strength");
        };

        $scope.addSpeed = function(){
            $scope.abilities.push("Speed");
        };

        $scope.addFlight = function(){
            $scope.abilities.push("Flight");
        };
    },

我很确定有充分的理由使用 Controller 和这个对象。我无法理解为什么。

Answer 1

您是正确的，您可以公开 link 函数中的函数并获得相同的结果。指令 Controller 有点奇怪，但随着我编写了更复杂的指令，我决定将尽可能多的行为推送到 Controller 中，并将 DOM 相关的内容留在 link 函数中。原因是:

• 我可以传入 Controller 名称，而不是将函数放在指令中；在我看来，事情变得更干净
• Controller 可以公开同级指令或相关指令内部使用的公共(public) API，以便您可以进行一些互操作并鼓励 SoC。
• 如果您愿意，您可以将 Controller 测试与指令编译分开。

我通常只在可能存在复杂的状态转换、正在处理外部资源(即 $http)或需要重用时才引入 Controller 。

您应该注意到，Angular 1.2 在指令上公开了“controllerAs”，这允许您直接使用指令模板中的 Controller ，并减少 $scope 组合引入的一些仪式。