controller - Angularjs - Pass argument to directive -

controller - Angularjs - Pass argument to directive -

im wondering if there way pass argument directive?

what want append directive controller this:

$scope.title = "title"; $scope.title2 = "title2"; angular.element(document.getelementbyid('wrapper')).append('<directive_name></directive_name>');

is possible pass argument @ same time content of directive template linked 1 scope or another?

here directive:

app.directive("directive_name", function(){ homecoming { restrict:'e', transclude:true, template:'<div class="title"><h2>{{title}}</h3></div>', replace:true }; })

what if want utilize same directive $scope.title2 ?

any advices?

update :

here how solved problem:

directive

app.directive("directive_name", function(){ homecoming { restrict:'e', transclude:true, template: function(elem, attr){ homecoming '<div><h2>{{'+attr.scope+'}}</h3></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 can utilize different scopes through same directive , append them dynamically.

you can pass arguments custom directive builtin angular-directives - specifying attribute on directive-element:

angular.element(document.getelementbyid('wrapper')) .append('<directive-name title="title2"></directive-name>');

what need define scope (including argument(s)/parameter(s)) in mill function of directive. in below illustration directive takes title-parameter. can utilize it, illustration in template, using regular angular-way: {{title}}

app.directive('directivename', function(){ homecoming { restrict:'e', scope: { title: '@' }, template:'<div class="title"><h2>{{title}}</h3></div>' }; });

depending on how/what want bind, have different options:

= two-way binding @ reads value (one-way binding) & used bind functions

in cases may want utilize "external" name differs "internal" name. external mean attribute name on directive-element , internal mean name of variable used within directive. can achieved specifying name behind above mentioned option. illustration if @ above directive, might not want specify another, additional attribute title, though internally want work title-property:

usage:

<directive-name="title2"></directive-name>

scope definition:

scope: { title: '@directivename' }

the usage in template stays same:

<directive-name title="title2"></directive-name>

please note next things:

the html5-specification says custom attributes (this on place in angular applications) should prefixed data-. angular supports stripping data--prefix attributes. in above illustration specify attribute on element (data-title="title2") , internally same. attributes on elements in form of <div data-my-attribute="..." /> while in code (e.g. attributes on scope) in form of myattribute. lost lots of time before realized this. for approach exchanging/sharing info between different angular components (controllers, directives), might want have @ services or directive controllers. you can find more info on angular homepage (directives)

angularjs controller arguments directive