Maxim2015-01-06 14:31:48
Maxim, 2015-01-06 14:31:48

AngularJS: Controller directive and "controller as" syntax (style guide questions)?

In the style guide, in the directives section, a template is proposed in which the logic of the directive is proposed to be formatted in the controller: template
There were questions about this:
1. Do I understand correctly that the code for working with the DOM should be placed in the link function, and the logic in the controller?
2. How to be, for example, with the directive which uses ngModel ? After all, in the controller we will not be able to use ngModelController, and we will have to spread the logic already by the link method, which seems to be wrong:

        .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. Why is it generally proposed to move the logic to the controller, because it should be in the service, and the controller is only for passing parameters to the service?
4. How logical is this approach of using a controller to access ngModelController ?
function link (scope, element, attrs, ngModelController){
            scope.vm = new SelectBoxController(scope, element, ngModelController);

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Alexey P, 2015-01-06

so, let's as questions come in
1. correct, but not quite. the logic of working with the house can also be located in compile, depending on the task.
2-3. why is it better to keep the logic in the controller (in the context of the directive)? the most important point is that you can throw services into the controller and work with them there. $scope is available in the controller (as well as in the link function). In the controller, you cannot (not sure, because I haven’t tried it) work with the ngModel directive controller (validation, parsers and formatters), but you can create a data pack that these (above) objects will work with in the link function.
4. I don’t see the point in this approach, because it turns out that you init the controller for the 2nd time (through new). and I'm not entirely sure that the controller can be used as a class to create instances. it has a different mechanics than angular.module().service()
The biggest plus of all this action is the convenience of testing.
a separate controller is easier to test
actions on the house it is easier to test when they are not mixed with the logic of the controller,
the code is testable and maintainable

Sergey, 2015-01-06
Protko @Fesor

The point is simple. The controller provides data, link maps the data to the directive (and how, through the scope, templates, directly interacting with the DOM, is up to you).

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

Thus, your work with data does not depend in any way on the way this data is output. Think of the link function as a presentation layer.
In the case of ngModel, to be honest, I can’t immediately offer options for which the controller should have access to it. Please provide an example if you don't mind.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question