Angularjs - Pass argument to directive
Solution 1
Here is how I solved my problem:
Directive
app.directive("directive_name", function(){
return {
restrict: 'E',
transclude: true,
template: function(elem, attr){
return '<div><h2>{{'+attr.scope+'}}</h2></div>';
},
replace: true
};
})
Controller
$scope.building = function(data){
var chart = angular.element(document.createElement('directive_name'));
chart.attr('scope', data);
$compile(chart)($scope);
angular.element(document.getElementById('wrapper')).append(chart);
}
I now can use different scopes through the same directive and append them dynamically.
Solution 2
You can pass arguments to your custom directive as you do with the builtin Angular-directives - by specifying an attribute on the directive-element:
angular.element(document.getElementById('wrapper'))
.append('<directive-name title="title2"></directive-name>');
What you need to do is define the scope
(including the argument(s)/parameter(s)) in the factory function of your directive. In below example the directive takes a title
-parameter. You can then use it, for example in the template
, using the regular Angular-way: {{title}}
app.directive('directiveName', function(){
return {
restrict:'E',
scope: {
title: '@'
},
template:'<div class="title"><h2>{{title}}</h2></div>'
};
});
Depending on how/what you want to bind, you have different options:
-
=
is two-way binding -
@
simply reads the value (one-way binding) -
&
is used to bind functions
In some cases you may want use an "external" name which differs from the "internal" name. With external I mean the attribute name on the directive-element and with internal I mean the name of the variable which is used within the directive's scope.
For example if we look at above directive, you might not want to specify another, additional attribute for the title, even though you internally want to work with a title
-property. Instead you want to use your directive as follows:
<directive-name="title2"></directive-name>
This can be achieved by specifying a name behind the above mentioned option in the scope definition:
scope: {
title: '@directiveName'
}
Please also note following things:
- The HTML5-specification says that custom attributes (this is basically what is all over the place in Angular applications) should be prefixed with
data-
. Angular supports this by stripping thedata-
-prefix from any attributes. So in above example you could specify the attribute on the element (data-title="title2"
) and internally everything would be the same. - Attributes on elements are always in the form of
<div data-my-attribute="..." />
while in code (e.g. properties on scope object) they are in the form ofmyAttribute
. I lost lots of time before I realized this. - For another approach to exchanging/sharing data between different Angular components (controllers, directives), you might want to have a look at services or directive controllers.
- You can find more information on the Angular homepage (directives)
Solution 3
You can try like below:
app.directive("directive_name", function(){
return {
restrict:'E',
transclude:true,
template:'<div class="title"><h2>{{title}}</h3></div>',
scope:{
accept:"="
},
replace:true
};
})
it sets up a two-way binding between the value of the 'accept' attribute and the parent scope.
And also you can set two way data binding with property: '='
For example, if you want both key and value bound to the local scope you would do:
scope:{
key:'=',
value:'='
},
For more info, https://docs.angularjs.org/guide/directive
So, if you want to pass an argument from controller to directive, then refer this below fiddle
http://jsfiddle.net/jaimem/y85Ft/7/
Hope it helps..
Solution 4
Controller code
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.person = {
name:"sangeetha PH",
address:"first Block"
}
}]);
Directive Code
myApp.directive('searchResult',function(){
return{
restrict:'AECM',
templateUrl:'directives/search.html',
replace: true,
scope:{
personName:"@",
personAddress:"@"
}
}
});
USAGE
File :directives/search.html
content:
<h1>{{personName}} </h1>
<h2>{{personAddress}}</h2>
the File where we use directive
<search-result person-name="{{person.name}}" person-address="{{person.address}}"></search-result>
SKYnine
Creative technologist for a production / postproduction company in the film industry
Updated on July 05, 2022Comments
-
SKYnine almost 2 years
Im wondering if there is a way to pass an argument to a directive?
What I want to do is append a directive from the controller like this:
$scope.title = "title"; $scope.title2 = "title2"; angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');
Is it possible to pass an argument at the same time so the content of my directive template could be linked to one scope or another?
here is the directive:
app.directive("directive_name", function(){ return { restrict:'E', transclude:true, template:'<div class="title"><h2>{{title}}</h3></div>', replace:true }; })
What if I want to use the same directive but with $scope.title2?
-
SKYnine over 9 yearsIm not sure I understand how Im supposed to pass the argument from the controller
-
SDK over 9 yearsI have updated an answer with fiddle, please refer that and hope it gives some idea..
-
SKYnine over 9 yearsI found something which work differently (updated my question) thanks!
-
Tamb over 7 yearsCan you explain this please?
-
eran otzap about 7 yearsWhat about directives which are restrict : A meaning attribute
-
Aivus almost 7 years@eranotzap It restricts directive to be used as attribute only.
-
eran otzap almost 7 years@Aivus that's very true. I ment what about the answer cases in which they are restricted to be used as attributes.
-
Dilnoor Singh over 6 yearsGreat answer, this explains so much.
-
Soldeplata Saketos about 6 yearsworks for scalar arguments, but not for objects, arrays or functions. :/
-
x-yuri over 2 years
@
copies the value, for one-way binding there's<
.<directive-name="title2">
? O.o Is that legal?