angularjs - In a custom directive, what functionality does `controller` have over `link`? -


in trying grasp on creating own angularjs directives, have example need, realize in borrowing various examples, can create functionality directive's view in both controller link.

it seems rid of controller , put link, or there can controller can't link?

http://jsfiddle.net/edwardtanguay/gxr49h96/6

.directive('itemmenu', function () {      var controller = function ($scope) {         var vm = this;         vm.additem = function () {             $scope.add();             vm.items.push({                 'kind': 'undefined',                     'firstname': 'joe',                     'lastname': 'newton',                     'age': math.floor(math.random() * 60) + 20             });         };          // same function defined below in link                 //        $scope.converttointernal = function(item) {         //            item.internalcode = 'x0000';         //            item.kind = 'internal';         //        };             };      return {         restrict: 'a',         scope: {             item: '=',             add: '&'         },         controller: controller,         controlleras: 'vm',         bindtocontroller: true,         template: '<div ng-include="gettemplateurl()"></div>',         link: function (scope, element, attrs) {             scope.gettemplateurl = function () {                 switch (scope.item.kind) {                     case 'external':                         return 'itemmenutemplateexternal';                     case 'internal':                         return 'itemmenutemplateinternal';                     default:                         return 'itemmenutemplateundefined';                 }             };              scope.converttointernal = function(item) {                 item.internalcode = 'x0000';                 item.kind = 'internal';             };         },     };  }) 

you may find lot of watery rants controller vs link, of them contain information $compile service documentation.

answering question directly,

  • controllers other modules/files can plugged directive via angular di controller: 'controller'

  • controller can injected dependencies while link has fixed arguments list of , gets directive's dependencies

  • controller kicks in before link, can prepare scope linking or recompile element on condition asap

  • controller function has this, code appearance complies other oop-like es5 code, , methods can transferred between other code parts, e.g. service service or third-party code

  • as result, controllers suited defined es2015 or ts classes.

  • directive's controller can required child directive , provides convenient one-way interaction between two

  • controller makes use of bindtocontroller: true + controlleras: 'vm' , implements $scope.vm recipe (particularly useful fight js prototypal inheritance) while keeping this syntax

  • bindtocontroller object value provides attribute bindings inherited scope: true scope, no more $attr.$observe

  • bindtocontroller object value provides further granularity isolated scope. if there attributes should bound controller , accessed require, can done now

which code goes controller , link more delicate question.

it conventional use angular controllers view models, in mvvm (hence controlleras: 'vm' convention), if there job controllers (i.e. binding services scope values or setting scope watchers) give them, leave rest link.

since $attrs, $element , $transclude local dependencies should injected controller explicitly, 1 may consider sign skip them ($scope should injected $scope.$ methods, ignore fact).

there non-religious concerns job should done link , not controller. required controllers aren't available in controller itself, kind of directive interaction takes place in link. since controller launches @ earlier compilation phase link, bound attribute values won't interpolated yet, code depends on these scope values goes link. same applies other dom-related code, goes link for reason.

it matter of proper code style , not real necessity. of code in example, scope stuff controller-friendly, don't think link should there @ all.


Comments

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

html - Missing border-right in select on Firefox -

python - build a suggestions list using fuzzywuzzy -