Answer the question
In order to leave comments, you need to log in
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:
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
};
}
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
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()
upd
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
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).
I.e...
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
}
}
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question