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 whilelink
has fixed arguments list of , gets directive's dependenciescontroller
kicks 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.service
service or third-party codedirective's controller can
require
d child directive , provides convenient one-way interaction between twocontroller
makes use ofbindtocontroller: true
+controlleras: 'vm'
, implements$scope.vm
recipe (particularly useful fight js prototypal inheritance) while keepingthis
syntaxbindtocontroller
object value provides attribute bindings inheritedscope: true
scope, no more$attr.$observe
bindtocontroller
object 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
. require
d 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