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'controllercan injected dependencies whilelinkhas fixed arguments list of , gets directive's dependenciescontrollerkicks in beforelink, can prepare scope linking or recompile element on condition asapcontroller function has
this, code appearance complies other oop-like es5 code, , methods can transferred between other code parts, e.g.serviceservice or third-party codedirective's controller can
required child directive , provides convenient one-way interaction between twocontrollermakes use ofbindtocontroller: true+controlleras: 'vm', implements$scope.vmrecipe (particularly useful fight js prototypal inheritance) while keepingthissyntaxbindtocontrollerobject value provides attribute bindings inheritedscope: truescope, no more$attr.$observebindtocontrollerobject value provides further granularity isolated scope. if there attributes should bound controller , accessedrequire, 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
Post a Comment