关注点分离

Question

在AngularJS中使用controllerAs语法时，为ng-click定义处理程序的最佳位置是什么？在控制器上或在范围上（在链接功能中定义）？

那么，你使用：

angular.module('app', []).
    controller('myDirective', function(){
        return {
            template: '<div><button ng-click=vm.onClick()></button></div>',
            controller: function(){
                var vm = this;

                vm.onClick = function(){
                    vm.myValue = vm.doSomethingFancy();
                };

                this.doSomethingFancy = function(){};
            }
        }
    });

或者：

angular.module('app', []).
    controller('myDirective', function () {
        return {
            template: '<div><button ng-click=onClick()></button></div>',
            require: 'myDirecive',
            controller: function () {
                var vm = this;

                this.doSomethingFancy = function () {
                    vm.myValue = 'somethingfancy';
                };
            },
            link: function (scope, elem, attr, ctrl) {
                scope.onClick = function () {
                    ctrl.doSomethingFancy();
                }
            }
        }
    });

我实际上喜欢第二个，因为现在控制器只分配值，事件处理在链接函数中完成。

无论如何......让我知道你的想法是什么。

Answer 1

并非所有 set-in-stone-rules ，但您可以使用以下指南：

关注点分离

修改控制器中的模型数据
修改指令

doSomethingFancy是否对您的模型（范围内）做了花哨的事情？ - 跟控制器一起去。

doSomethingFancy是否使用用户界面执行某些花哨？ - 使用链接

比赛条件

控制器代码在模板编译之前执行
链接功能在模板编译后执行

这并非完全正确：您还可以使用pre链接方法。

常识

如果通过在链接方法中放置一个简单的小函数来更可读地编写代码，请使用链接方法。在设计上，只是为了遵守一些规则并不是一件好事:) MV *模式是准则。

Answer 2

长话短说： 没有实际的区别。控制器功能运行得更早，但通常并不重要。如果您的处理程序没有复杂的逻辑，依赖于外部服务 - 将它们放在链接中，否则 - 控制器更好

短篇小说： 有一个类似的问题，有更详细的回答：

Difference between the 'controller', 'link' and 'compile' functions when defining a directive

在指令中使用controllerAs语法放置单击处理程序的位置

2 个答案:

关注点分离

比赛条件

常识