Where to specify custom directive dependency. is it the same at the controller and directive level?
I have a custom directive defined like this:
app.directive('tagProfile', ['userService', function(userService) {
return {
restrict: 'E',
scope: {
mode: '@'
,entity: '='
,onUpdate: '&'
,onCancel: '&'
},
templateUrl: '/public/user/tag_profile.html',
controller: ['$scope', function($scope) {
$scope.userService = userService
}],
link: function(scope, element, attrs) {
}
}
}])
Please note what I am pasting userService
in directive
because most of the tutorials in the custom directive injection dependencies are there. I tried to inject it into a controller function and it works as well
controller: ['$scope', 'userService', function($scope, userService)
I will most likely only use the controller function and not the link function. therefore userService will not be used in the link. Also, are the injections at both sites the same? or which one is better?
Also why is the link function inserting scope
instead $scope
? and are we not using explicit annotation to minimize support?
source to share
I will most likely only use the controller function and not the link function. therefore userService will not be used in the link. Also, are the injections at both sites the same? or which one is better?
If you're not going to use the link step, stick with typing in controller
. If you want to use a controller and link step, go for injection in the directive definition.
which of the two is better
or
which of the two is recommended
.
In this case, it refers to userService
. Injecting $scope
a directive into the definition is not something I've ever done, so I can't tell what side effects it might bring.
Same?
- In terms of controllers? Yes.
- From a linker perspective? Not.
Also, why does the referencing function introduce scope instead of $ scope? and are we not explicitly using annotation to support support?
The first parameter link
will always be there $scope
, so it doesn't matter what you call it.
/**
* $compileProvider.$get
* L#6931 in angular.js
*/
return compile;
function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) {
/**
* Redacted code...
*/
return function publicLinkFn(scope, cloneConnectFn, options) {
Explicit annotation is not needed for the link function (returns compile
) as it is not exposed (or exposed) to DI. Its arguments are predefined.
This will work as well as explicit naming:
return {
link: function (a,b,c) {
// { a: $scope, b: $element, c: $attrs }
}
}
TL; DR
- Do not add "material" in
directive
if you are using "material" incontroller
. -
link
not open to DI.
source to share