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

Question

在 AngularJS 中使用 controllerAs 语法时，为 ng-click 等定义处理程序的最佳位置是什么？在 Controller 上还是在作用域上(在链接函数中定义)？

那么，你使用:

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

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

无论如何...让我知道您的想法。

Answer 1

并非所有一成不变的规则，但您可以使用以下内容作为指导:

关注点分离

• 在 Controller 中修改模型数据
• 修改指令中的DOM/UI

doSomethingFancy 是否对您的模型(在范围内)做了一些花哨的事情？ -- 使用 Controller 。

doSomethingFancy 是否对用户界面做了一些花哨的事情？ -- 使用链接

竞争条件

• Controller 代码在模板编译之前执行
• 链接函数在模板编译后执行

这不完全正确:您还可以使用 pre 链接方法。

常识

如果您通过在链接方法中放置一个简单的小函数来提高代码的可读性，请使用链接方法。过度设计，仅仅遵守一些规则并不是一件好事 :) MV* 模式是指南。