Где разместить обработчики кликов, используя синтаксис controllerAs в директивах

Question

При использовании синтаксиса controllerAs в AngularJS, что является лучшим местом для определения обработчиков для 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

Это не все установленные в камне правила, но вы можете использовать следующее как руководство:

Разделение Концерна

• Изменить данные модели в контроллере
• Изменить DOM/UI в директиве

Есть ли doSomethingFancy сделать что-нибудь модное с вашей моделью (по объему)? - Иди с контроллером.

Есть ли doSomethingFancy сделать что-нибудь модное с пользовательским интерфейсом? - перейти по ссылке

Условия гонки

• Код контроллера выполняется перед компиляцией шаблона
• Функция Link выполняется после компиляции шаблона

Это не совсем так: вы также можете использовать pre метод связи.

Здравый смысл

Если ваш код более читабелен, поместив простую маленькую функцию в методе link, используйте метод link. Над дизайном просто соблюдать некоторые правила - нехорошо:) Шаблоны MV* - это рекомендации.

Answer 2

Короче говоря: нет никакой разницы. Функция контроллера запускается раньше, но обычно это не имеет значения. Если ваши обработчики не имеют сложной логики, зависящей от внешних сервисов - поместите их в ссылку, иначе - контроллер лучше

Короткая история: есть похожий вопрос, на который ответили более подробно:

Разница между функциями 'controller', 'link' и 'compile' при определении директивы