I need to design dynamic Menu , menu items will be loaded from json . and when menu clicked i want to apply different template on them .
I was palnning to use Directives but i wonder how can i use template while appending Element in Controller .I want to use template beacuse i dont want hardcoded thing , i want to call template file.
enter link description here
how can i pass attributes to template in above fiddle?
Any other suuggestion please let me know !!
app.directive("helloWorld", function() {
return {
restrict: "E",
scope: {
name: "#name"
},
template: "<button ng-click='click()'>Click me</button>",
controller: function($scope, $element){
$scope.clicked = 0;
$scope.click = function(){
alert("Element clicked");
$element.append('yes i did it');
}
}
};
});
You can use $http to download your template and after $compile to compile it:
app.directive("helloWorld", function($http, $compile) {
return {
restrict: "E",
scope: {
name: "#name"
},
link: function(scope, element, attrs) {
$http.get("yourTemplate").then(function(template) {
$compile(template)(scope);
element.append(template);
});
}
};
});
Related
I'm trying to write a directive such that an element with attribute if-login-service="facebook" will be created, but an element with any other value for this attribute will not.
The progress I've made with this directive so far is shown below
app.directive('ifLoginService', function($compile) {
return {
restrict: 'EA',
compile: function compile(element, attrs) {
return function($scope, $element, $attr) {
var serviceName = attrs.ifLoginService;
if (serviceName === 'facebook') {
// use compile to include and compile your content here
$compile($element.contents())($scope);
}
}
}
};
});
A Plunker demo is available here. If it were working, the "Facebook" button would be displayed and the "Not Facebook" button would not. Currently both buttons are displayed, but I'm not sure where I'm going wrong.
You should use compile service to write your directive.
$compile('your html content here')($scope);
To clear root element such as button use this:
$element[0].html('');
Or remove it from DOM:
$element[0].parentNode.removeChild($element[0]);
Here is your directive repaired:
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope) {
$scope.model = {
toggle: 'true'
};
});
app.directive('ifLoginService', function($compile,$animate) {
return {
restrict: 'EA',
replace: true,
compile: function compile(element, attrs) {
return function($scope, $element, $attr) {
var serviceName = attrs.ifLoginService;
console.debug('Testing service name', serviceName);
if (serviceName === 'true') {
// use compile to include and compile your content here
$element.html($compile($element.contents())($scope));
}
else
{
$element[0].parentNode.removeChild($element[0]);
}
}
}
};
});
Link to plunkr here
I have a scenario where i need to apply different directives (attribute) to a DIV inside a Angular bootstrap Modal at runtime (button click).
I would know the name of the directive to apply. But i am not able to figure out how to change the template at runtime to add necessary directive name as an attribute to the DIV.
consider this plunker
Basically i want the div to have child directive as an attribute using synstax like this
<div {{child}}></div>
So when it works, it should generate <div child-directive></div>
How can this be done? is this even possible? What is the best way to change the template before opening the Modal so that it wires up correctly when loaded.
// Code goes here
var app = angular.module('main-module', ['ui.bootstrap']);
app.directive('parentDirective', function($uibModal, $compile) {
return {
restrict: 'E',
template: "<h2>I am Parent</h2><button ng-click='click()'>Click Me</button>",
scope: {
child:'#'
},
link: function($scope, elem, attrs) {
console.log('?',$scope.child, $scope);
var template = "<div><h3>This is modal</h3>"
+ "Ideally you should see the child directive below"
+ "<hr />"
+ "<div "+ $scope.child + "></div></div>";
$scope.click = function() {
$uibModal.open({
template: template,
scope: $scope,
size: 'lg',
});
}
}
};
})
.directive('childDirective', function() {
return {
restrict: 'A',
template: "<div><h4>I am Child</h4><a ng-click='click()'>Click Me!!</a></div>",
replace: true,
scope: {},
link: function($scope, elem, attrs) {
$scope.click = function() {
alert("I am in child scope");
}
}
};
}).directive('anotherChildDirective', function() {
return {
restrict: 'A',
template: "<div><h4>I am another Child</h4><a ng-click='click()'>Click Me!!</a></div>",
replace: true,
scope: {},
link: function($scope, elem, attrs) {
$scope.click = function() {
alert("I am in child scope");
}
}
};
});;
I made a custom directive:
js part:
angular.module("myDirectives", []).directive("ngShowbox", function(){
return {
restrict: "E",
scope: {
title: "="
},
template: "<a href='#' ng-click='show($event)'>{{title}}</a>",
controller: function($scope, $element){
$scope.show = function(event){
// do something...
}
}
}
});
html part:
<ng-showbox title="whatToPutHere??"></ng-showbox>
I would like to pass some text from the title attribute,
then my template will show the text.
How can I make it?
Thank you very much :)
Use # in directive scope:-
scope: {
title: "#"
},
Plunker for you :)
Inside angularJS directive I'm trying to iterate over array and based on values I would like to create nested list of directives.
Current version of directive
Directive type
.directive("type", function($compile, $log){
return{
restrict: "E",
replace: true,
transclude: true,
scope: {
type: '='
},
template: "<div></div>",
link: function(scope, element, attrs){
if (angular.isArray(scope.type)){
angular.forEach(scope.type, function(value, index){
$log.error(value);
element.append("<type type='scope.type['"+index+"]'></type>");
});
} else if (angular.isObject(scope.type)){
element.append("OBJECT")
} else {
element.append("<div>{{scope.type}}</div>")
}
$compile(element.contents())(scope)
}
};
})
I also tried to use above directive with next version of link function:
if (angular.isArray(scope.type)) {
element.append("<div ng-repeat='element in scope.type'><type type='element'></type></div>");
} else if (angular.isObject(scope.type)) {
element.append("OBJECT")
} else {
element.append("<div>{{scope.type}}</div>")
}
$compile(element.contents())(scope)
}
None of provided codes solve my issue.
Below you will find example explaining on specific case:
Let's say that I had next object in the scope.type = [null,"int"]. Now I would like to use <type type='type'><type> and as a result of first evaluation I want to have sth like:
<type type='type[0]'></type><type type='type[1]'></type>
Further evaluation of those values should lead to some simpler form but right now it is not important.
How I can achieve sth like this?
Edit
I tried even to exctract part of the code responsible for iteration to the seperate directive but it still does not work. Code:
Update link function in type directive:
link: function(scope, element, attrs) {
if (angular.isArray(scope.type)) {
element.append("<typeb type='scope.type'></typeb>")
} else if (angular.isObject(scope.type)) {
element.append("OBJECT")
} else {
element.append("<div>{{scope.type}}</div>")
}
$compile(element.contents())(scope)
}
New directive:
.directive("typeb", function($compile, $log){
return{
restrict: "E",
replace: true,
transclude: true,
scope: {
type: '='
},
template: "<div ng-repeat='t in type'>{{t}}</div>",
};
})
Problem still occurs but generated html contains only next pieces as a result of typeb directive:
<!-- ngRepeat: t in type -->
The problem you are getting is <!-- ngRepeat: t in type --> this is because your type didn't contains any value, when it is inside typeb directive
Your directive shouldn't be use scope.variable on view.
Scope variable will be directly accessible by their name like
{{type}} or <typeb type='type'></typeb>
Change your link code to below.
Directive link
link: function(scope, element, attrs) {
if (angular.isArray(scope.type)) {
element.append("<typeb type='type'></typeb>")
} else if (angular.isObject(scope.type)) {
element.append("OBJECT")
} else {
element.append("<div>{{type}}</div>")
}
$compile(element.contents())(scope)
}
Thanks.
Use an ng-repeat in the template
<your-directive attr="item.someattr" ng-repeat="item in items"></your-directive>
.directive("type", function($compile, $log){
return{
restrict: "E",
replace: true,
transclude: true,
scope: {
type: '='
},
template: "NG REPEAT HERE",
...
})
Here's a short fiddle:
http://jsfiddle.net/aSg9D/
Basically, neither <div data-foo-{{letterA}}></div> nor <div data-ng:model="foo-{{letterB}}"></div> are interpolated.
I'm looking for a way to dynamically load one of several inline templates.
Pardon me if this has already been asked before, but I searched and couldn't find it.
I believe Radim Köhler has the correct answer. Just before it was posted, I hacked together something to load directives from another directive like this:
angular.module('myApp', []).directive('loadTmpl', function($compile) {
return {
restrict: 'A',
replace: true,
link: function($scope, $element, $attr) {
$element.html("<div data-card-"+$attr.loadTmpl+"></div>");
$compile($element.contents())($scope);
}
};
});
And:
<div data-load-tmpl="{{directiveName}}"></div>
I think that's the minimalist approach, but there's probably something wrong with it, so just look at the answer below.
Let's adjust it this way (the udpated fiddle). The view:
<div my-selector name="letterA"></div>
<div my-selector name="letterB"></div>
the controller:
function myCtrl($scope) {
$scope.letterA = 'bar';
$scope.letterB = 'baz';
}
And here is new directive mySelector, containing the selector
.directive('mySelector',
[ '$templateCache','$compile',
function($templateCache , $compile) {
return {
scope: {
name: '='
},
replace: true,
template: '',
link: function (scope, elm, attrs) {
scope.buildView = function (name) {
var tmpl = $templateCache.get("dir-foo-" + name);
var view = $compile(tmpl)(scope);
elm.append(view);
}
},
controller: ['$scope', function (scope) {
scope.$watch('name', function (name) {
scope.buildView(name);
});
}],
};
}])
.run(['$templateCache', function ($templateCache) {
$templateCache.put("dir-foo-bar", '<div data-foo-bar></div>');
$templateCache.put("dir-foo-baz", '<div data-foo-baz></div>');
}])
In case you like it, all credits goes to Render a directive inside another directive (within repeater template) and AngularJS - Directive template dynamic, if you don't, blame me.