AngularJS: Контроллер директивы и синтаксиc «controller as» (вопросы по style guide)?

Question

[Максим]

В style guide, в разделе директив предлагается шаблон, в котором логику директивы предлагается оформлять в контроллер: шаблон

По этому поводу возникли вопросы:

1. Правильно ли понимаю, что в функции link должен размещаться код по работе с DOM, а логика в контроллере?

2. Как быть, например, с директивой которая использует ngModel ? Ведь в контроллере мы не сможем использовать ngModelController, и придется размазывать логику уже по методу link, что вроде как неверно:

angular
        .module('directives.selectBox', [])
        .directive('selectBox', selectBox);    
    
    function selectBox() {
        return {
            restrict   : 'E',
            require    : 'ngModel',
            scope      : { },
            templateUrl : 'common/directives/selectBox/selectBox.html',
            controller :  SelectBoxController,
            link: link
        };
    }

3. Почему вообще логику предлагается выносить в контроллер, ведь она должна быть в сервисе, а контроллер только для передачи параметров в сервис?

4. Насколько логичен такой подход использования контроллера, чтобы получить доступ к ngModelController ?

function link (scope, element, attrs, ngModelController){
            scope.vm = new SelectBoxController(scope, element, ngModelController);
  }

Answer 1

[Алексей П]

так, давай по мере поступления вопросов
1. правильно, но не совсем. логика работы с дом может так же располагаться в compile, зависит от задачи.
2-3. почему в контроллере лучше держать логику ( в разрезе директивы )? самый важный момент - в контроллер можно прокинуть сервисы и там работать с ними. в контроллере доступен $scope (так же как и в функции link). В контроллере ты не можешь ( не уверен, т.к. не пробовал ) работать с контроллером директивы ngModel (валидация, парсеры и форматеры), но ты можешь сформировать пак данных, с которыми будут работать эти (вышеперечисленные) объекты в функции link.
4. не вижу смысла в таком подходе, т.к. получается, что ты 2-й раз инитишь контроллер (через new). и я не совсем уверен, что контроллер можно использовать как Класс, для создания инстансов. у него механика работы отлична от angular.module().service()

upd
самый большой плюс всего этого действия - удобство тестирования.
отдельный контроллер проще тестировать
действия над дом проще тестировать, когда они не перемешаны с логикой контроллера
код получается тестируемый и поддерживаемый

Comments

[Максим]

Спасибо, идея понятна. Но как писал ниже, зачем они в style guide мапают данные именно в контроллере директивы, а не link? Ведь было бы логично, контроллер работает с данными, link - мапает их для view.

[Алексей П]

Максим: не за что. в контроллере они обрабатываются, а в линк - используются. в этом гайде, директива-то ни о чем-ная, ни разу не инвазивная.
и вообще ссылка в топик-стартере ведет на гайд для Directives and ControllerAs ([Style Y075]), где описано использование алиасов для контроллеров в директивах.
В будущем, в конце 2015, уже не будет такой мутоты. разработка будет вестись через web-components, а сервисы будут шарить дату между компонентами. осталось потерпеть 9-10 месяцев)

[Алексей П]

цитата из гайда

Use controller as syntax with a directive to be consistent with using controller as with view and controller pairings.

Why?: It makes sense and it's not difficult.

[Максим]

Видимо у меня проблема с пониманием логики представления и логики контроллера.
Вот пример директивы selectBox: pastebin.com/V7FvFt2y
Пользователь выбирает элемент из списка, жмет на него и срабатывает действие select в контроллере. Обработка события, по идее - это логика контроллера.
Но присвоение значения ngModel, это логика чего, разве представления? И как в этом примере обыграть присвоение ngModel.$setViewValue (), подскажите пожалуйста ?

[Алексей П]

все методы $render, $setViewValue, $parsers(массив), $formatters(массив), и другие. нужны для обработки значения, до того как оно попадет в модель, либо после того как там отработает. в общем это происходит, либо до контроллера, либо после. это своеобразная "логика отображения"
вот пример конвертации заяпятой в точку
plnkr.co/edit/pKXX2xcNjxmrdgtqVh2c?p=preview

[Максим]

Алексей П, спасибо большое! Идейно понял, как теперь правильно директивы оформлять.

[Алексей П]

Максим: не за что. задавайте вопросы, буду отвечать, по мере сил)
для повышения скила советую прочитать такие книги
автор -> наименование
alex vanston -> angularjs directives
josh kurz -> mastering angularjs directives
Pawel Kozlowski & Peter Bacon Darwin -> Mastering Web Application Development with AngularJS
последняя книга издавалась так же на русском языке (спасибо Павлу Козловскому)
издательство ДМТ-пресс

Answer 2

[Сергей Протько]

Суть проста. Контроллер предоставляет данные, link мэпит данные на директиву (а как, через scope, темплейты, напрямую взаимодействуя с DOM - решать вам).

То есть...

angular.module('app',  [])
  .directive('fooBar', function () {
    
    return {
      restrict: 'EA',
      requires: 'fooBar',
      controller: controller,
      link: link
    };
      
    function controller() {
      var bars = [];
      
      this.getSomeData(someOption){
            return someValueOrPromise;
      }
      
      // do soome logic with data
      
    }
    
    function link(scope, el, attrs, ctrl) {
      ctrl.getSomeData(attrs.options).then(function (data) {
            // render data
      }
    }
  });

Таким образом у вас работа с данными никак не зависит от способа вывода этих данных. Воспринимайте функцию link как слой представления.

В случае с ngModel - если честно не могу предложить сходу варианты при котором контроллер должен иметь к нему доступ. Предложите пример если не сложно.

Comments

[Максим]

Спасибо, такой вариант мне нравится. Меня смутил момент, что именно в style guide в директивах они мапают данные именно в контроллере и так советуют делать) Вот и завис, каким образом держать логику в контроллере, если тот же ngModel не могу в нем использовать. Насчет пример, возьмем директиву selecl, пользователь выбирает значение и его id присваивается через ngModel.$setViewValue(x).

[Сергей Протько]

Максим: ну так это относится к логике представления, то есть мы ловим ивент DOM-а и вызываем метод контроллера. Все хорошо. Другое дело если у директивы будет еще какая-то внутренняя логика по работе с данными.

[Sergey Romanov]

Может звучит по ламерски, но я даже не знал что можно использовать и линк и контроллер одновременно. Но это make sense. Даже не знаю, что теперь переделывать свои директивы или нет.