I'm creating a directive with template URL. I want to set the template URL dynamically based on user_role. Any idea?
Heres my directive code:
RatingRX.directive "headermenu", ->
directive = {}
directive.restrict = 'E'
directive.templateUrl = "../assets/common/headerMenu{{user_role}}.html"
directive
And I want to set user_role from the controller. Eg:
$scope.user_role = 1
You can pass a function to the templateUrl option and return a string that will be used as a template url at the end.
First of all assign a role onto the element as an attribute (where userRole is bound to scope) as:
<div my-directive user-role="{{userRole}}></div>
Then the directive can read it as:
myApp.directive('myDirective', function() {
return {
restrict: 'A',
templateUrl: function(element, attrs) {
return "../assets/common/headerMenu" + attrs.userRole + ".html";
}
}
});
Update: This used to work before with older version of Angular.
<div ng-if="userRole === 'admin'" my-directive user-role="admin"></div>
you can manipulate ng-include as a template
html:
<headermenu user-role="selectedUserRole"></headermenu>
js:
app.directive('headermenu', function() {
return {
restrict: 'E',
scope: {
userRole : '='
},
link: function($scope)
{
$scope.$watch('userRole', function(userRole)
{
if (userRole && userRole.length)
{
$scope.dynamicTemplateUrl = 'assets/common/headerMenu' + userRole + '.html';
}
});
},
template: '<ng-include src="dynamicTemplateUrl"></ng-include>'
};
});
html:
<headermenu path="assets/common/headerMenu{{selectedUserRole}}.html"></headermenu>
js:
app.directive('headermenu', function() {
return {
restrict: 'E',
scope: {
path : '@'
},
template: '<ng-include src="path"></ng-include>'
};
});
Why not do:
template : '<div ng-include="getActualTemplateContent()"></div>'
then:
$scope.getActualTemplateContent= function() {
return '../assets/common/headerMenu/' + $scope.user_role + '.html';
};
If not put it in the markup.
<div headermenu template="../assets/common/headerMenu{{user_role}}.html" />
<headermenu template="../assets/common/headerMenu{{user_role}}.html" />
angular.module("directives")
.directive("headermenu", function() {
return {
restrict: "EA",
scope: true,
templateUrl: function (element, attr) {
return attr.template;
},
link: function(scope, iElement, iAttrs, controller) {
....
}
};
});
user_rolecome from?