I'm trying to build a directive that takes care of adding more directives to the element it is declared on.
For example, I want to build a directive that takes care of adding datepicker, datepicker-language and ng-required="true".
If I try to add those attributes and then use $compile I obviously generate an infinite loop, so I am checking if I have already added the needed attributes:
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { // check
return;
}
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
// some more
$compile(element)(scope);
}
};
});
Of course, if I don't $compile the element, the attributes will be set but the directive won't be bootstrapped.
Is this approach correct or am I doing it wrong? Is there a better way to achieve the same behavior?
UDPATE: given the fact that $compile is the only way to achieve this, is there a way to skip the first compilation pass (the element may contain several children)? Maybe by setting terminal:true?
UPDATE 2: I have tried putting the directive into a select element and, as expected, the compilation runs twice, which means there is twice the number of expected options.
This question is related to
javascript
angularjs
model-view-controller
mvvm
angularjs-directive
In cases where you have multiple directives on a single DOM element and where the
order in which they’re applied matters, you can use the priority property to order their
application. Higher numbers run first. The default priority is 0 if you don’t specify one.
EDIT: after the discussion, here's the complete working solution. The key was to remove the attribute: element.removeAttr("common-things");, and also element.removeAttr("data-common-things"); (in case users specify data-common-things in the html)
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //this setting is important, see explanation below
priority: 1000, //this setting is important, see explanation below
compile: function compile(element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
}
};
}
};
});
Working plunker is available at: http://plnkr.co/edit/Q13bUt?p=preview
Or:
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true,
priority: 1000,
link: function link(scope,element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
$compile(element)(scope);
}
};
});
Explanation why we have to set terminal: true and priority: 1000 (a high number):
When the DOM is ready, angular walks the DOM to identify all registered directives and compile the directives one by one based on priority if these directives are on the same element. We set our custom directive's priority to a high number to ensure that it will be compiled first and with terminal: true, the other directives will be skipped after this directive is compiled.
When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).
If we don't set terminal:true and priority: 1000, there is a chance that some directives are compiled before our custom directive. And when our custom directive uses $compile to compile the element => compile again the already compiled directives. This will cause unpredictable behavior especially if the directives compiled before our custom directive have already transformed the DOM.
For more information about priority and terminal, check out How to understand the `terminal` of directive?
An example of a directive that also modifies the template is ng-repeat (priority = 1000), when ng-repeat is compiled, ng-repeat make copies of the template element before other directives get applied.
Thanks to @Izhaki's comment, here is the reference to ngRepeat source code: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
Try storing the state in a attribute on the element itself, such as superDirectiveStatus="true"
For example:
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { // check
return;
}
var status = element.attr('superDirectiveStatus');
if( status !== "true" ){
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
// some more
element.attr('superDirectiveStatus','true');
$compile(element)(scope);
}
}
};
});
I hope this helps you.
A simple solution that could work in some cases is to create and $compile a wrapper and then append your original element to it.
Something like...
link: function(scope, elem, attr){
var wrapper = angular.element('<div tooltip></div>');
elem.before(wrapper);
$compile(wrapper)(scope);
wrapper.append(elem);
}
This solution has the advantage that it keeps things simple by not recompiling the original element.
This wouldn't work if any of the added directive's require any of the original element's directives or if the original element has absolute positioning.
You can actually handle all of this with just a simple template tag. See http://jsfiddle.net/m4ve9/ for an example. Note that I actually didn't need a compile or link property on the super-directive definition.
During the compilation process, Angular pulls in the template values before compiling, so you can attach any further directives there and Angular will take care of it for you.
If this is a super directive that needs to preserve the original internal content, you can use transclude : true and replace the inside with <ng-transclude></ng-transclude>
Hope that helps, let me know if anything is unclear
Alex
I wanted to add my solution since the accepted one didn't quite work for me.
I needed to add a directive but also keep mine on the element.
In this example I am adding a simple ng-style directive to the element. To prevent infinite compile loops and allowing me to keep my directive I added a check to see if what I added was present before recompiling the element.
angular.module('some.directive', [])
.directive('someDirective', ['$compile',function($compile){
return {
priority: 1001,
controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) {
// controller code here
}],
compile: function(element, attributes){
var compile = false;
//check to see if the target directive was already added
if(!element.attr('ng-style')){
//add the target directive
element.attr('ng-style', "{'width':'200px'}");
compile = true;
}
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
if(compile){
$compile(iElement)(scope);
}
}
};
}
};
}]);
Here's a solution that moves the directives that need to be added dynamically, into the view and also adds some optional (basic) conditional-logic. This keeps the directive clean with no hard-coded logic.
The directive takes an array of objects, each object contains the name of the directive to be added and the value to pass to it (if any).
I was struggling to think of a use-case for a directive like this until I thought that it might be useful to add some conditional logic that only adds a directive based on some condition (though the answer below is still contrived). I added an optional if property that should contain a bool value, expression or function (e.g. defined in your controller) that determines if the directive should be added or not.
I'm also using attrs.$attr.dynamicDirectives to get the exact attribute declaration used to add the directive (e.g. data-dynamic-directive, dynamic-directive) without hard-coding string values to check for.
angular.module('plunker', ['ui.bootstrap'])_x000D_
.controller('DatepickerDemoCtrl', ['$scope',_x000D_
function($scope) {_x000D_
$scope.dt = function() {_x000D_
return new Date();_x000D_
};_x000D_
$scope.selects = [1, 2, 3, 4];_x000D_
$scope.el = 2;_x000D_
_x000D_
// For use with our dynamic-directive_x000D_
$scope.selectIsRequired = true;_x000D_
$scope.addTooltip = function() {_x000D_
return true;_x000D_
};_x000D_
}_x000D_
])_x000D_
.directive('dynamicDirectives', ['$compile',_x000D_
function($compile) {_x000D_
_x000D_
var addDirectiveToElement = function(scope, element, dir) {_x000D_
var propName;_x000D_
if (dir.if) {_x000D_
propName = Object.keys(dir)[1];_x000D_
var addDirective = scope.$eval(dir.if);_x000D_
if (addDirective) {_x000D_
element.attr(propName, dir[propName]);_x000D_
}_x000D_
} else { // No condition, just add directive_x000D_
propName = Object.keys(dir)[0];_x000D_
element.attr(propName, dir[propName]);_x000D_
}_x000D_
};_x000D_
_x000D_
var linker = function(scope, element, attrs) {_x000D_
var directives = scope.$eval(attrs.dynamicDirectives);_x000D_
_x000D_
if (!directives || !angular.isArray(directives)) {_x000D_
return $compile(element)(scope);_x000D_
}_x000D_
_x000D_
// Add all directives in the array_x000D_
angular.forEach(directives, function(dir){_x000D_
addDirectiveToElement(scope, element, dir);_x000D_
});_x000D_
_x000D_
// Remove attribute used to add this directive_x000D_
element.removeAttr(attrs.$attr.dynamicDirectives);_x000D_
// Compile element to run other directives_x000D_
$compile(element)(scope);_x000D_
};_x000D_
_x000D_
return {_x000D_
priority: 1001, // Run before other directives e.g. ng-repeat_x000D_
terminal: true, // Stop other directives running_x000D_
link: linker_x000D_
};_x000D_
}_x000D_
]);<!doctype html>_x000D_
<html ng-app="plunker">_x000D_
_x000D_
<head>_x000D_
<script src="//code.angularjs.org/1.2.20/angular.js"></script>_x000D_
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>_x000D_
<script src="example.js"></script>_x000D_
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<div data-ng-controller="DatepickerDemoCtrl">_x000D_
_x000D_
<select data-ng-options="s for s in selects" data-ng-model="el" _x000D_
data-dynamic-directives="[_x000D_
{ 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },_x000D_
{ 'tooltip-placement' : 'bottom' },_x000D_
{ 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }_x000D_
]">_x000D_
<option value=""></option>_x000D_
</select>_x000D_
_x000D_
</div>_x000D_
</body>_x000D_
_x000D_
</html>There was a change from 1.3.x to 1.4.x.
In Angular 1.3.x this worked:
var dir: ng.IDirective = {
restrict: "A",
require: ["select", "ngModel"],
compile: compile,
};
function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
tElement.append("<option value=''>--- Kein ---</option>");
return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
attributes["ngOptions"] = "a.ID as a.Bezeichnung for a in akademischetitel";
scope.akademischetitel = AkademischerTitel.query();
}
}
Now in Angular 1.4.x we have to do this:
var dir: ng.IDirective = {
restrict: "A",
compile: compile,
terminal: true,
priority: 10,
};
function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
tElement.append("<option value=''>--- Kein ---</option>");
tElement.removeAttr("tq-akademischer-titel-select");
tElement.attr("ng-options", "a.ID as a.Bezeichnung for a in akademischetitel");
return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
$compile(element)(scope);
scope.akademischetitel = AkademischerTitel.query();
}
}
(From the accepted answer: https://stackoverflow.com/a/19228302/605586 from Khanh TO).
Source: Stackoverflow.com