控制器能做哪些指令不能做的事情？ [复制]

Question

我刚刚开始使用 AngularJS。当我第一次开始阅读它时，从初学者教程看来，控制器是 Angular 应用程序的基本构建块。然而，自从学习指令以来，我一直在创建自己的小 Angular 应用程序，只有指令，实际上不是一个控制器。我不明白为什么我需要一个控制器。

我见过的唯一使用控制器完成的事情就是将变量添加到范围：

angular.controller("myController",
    function($scope)       
    {
        $scope.x = 5;
        $scope.y = 6;
    }
)

但我也可以使用指令来做到这一点，方法是使用传递给链接函数的 scope 参数。

还有什么可以用控制器做的，而不能用指令做的吗？或者至少是控制器比指令更容易做的事情？

例如，如果我只需要使用一些变量 x 和 y 填充范围，我可以这样做：

angular.directive(
    "myDirective",
    function()
    {
        return {
            link: function(scope, element, attributes)
            {
                scope.x = 5;
                scope.y = 6;
            }
        };
    }
);

Answer 1

当然，您可以在link 回调中编写应用所需的几乎所有内容。请注意，我什至没有将其称为指令，我说的是 link 回调。指令是定义自定义 HTML 标记及其相关功能的东西，link 回调只是其中的特定部分。

问题在于，这只不过是使用 jQuery，或者使用 addEventListener 将行为附加到 HTML 元素。另一方面，您可以将控制器编写为类，而不是操作scope 对象的过程代码。这是我在typescript 中写angularjs 的首选风格：

export default class WidgetController {
    error: string;

    static $inject = ['$state', 'FooService', 'BarService'];

    constructor(
        protected $state: angular.ui.IStateService,
        protected foo: FooService,
        protected bar: BarService
    ) {}

    get fooValue() {
        return this.foo.baz;
    }

    doSomething() {
        this.error = null;
        this.bar.getSomething().then(data => {
            if (data.error) {
                this.error = data.error;
            } else {
                this.$state.go('success');
            }
        });
    }
}

此模板可能如下所示：

<h1>{{ $ctrl.fooValue }}</h1>
<button ng-click="$ctrl.doSomething()">Do!</button>
<p>{{ $ctrl.error }}</p>

控制器可以使用 ui-router 附加到模板：

import WidgetController from 'widget-controller';

module.config(['$stateProvider', ($state: angular.ui.IStateProvider) => {
    $state.state('widget', {
        controller: WidgetController,
        controllerAs: '$ctrl',
        templateUrl: '/templates/widget.html',
    });
}]);

或者作为一个组件：

module.component('widget', {
    templateUrl: '/templates/widget.html',
    controller: WidgetController,
    bindings: {
        error: '@'
    }
});

或使用ng-controller 或其他多种方式。

它为您提供更大的灵活性。它允许您很容易地单独测试控制器，因为它只是一个常规类。它允许您为不同的模板重用控制器，并为不同的控制器重用相同的模板（是的，这实际上非常有用）。它的 IMO 更具可读性和更易于理解。特别是在模板中使用$ctrl. 可以防止您构建过于相互依赖的嵌套范围，并显式绑定模板以仅使用其控制器，而不是使用某些隐式范围。

有很多方法可以做事，但随着时间的推移，我发现一件事是处理scope 对象既冗长又烦人，并且很容易导致意大利面条式代码。因此，远离这一点，您很快就会将控制器作为对象。