Monday 15 March 2010

angularjs - How can I pass an object reference to an inner directive in Angular JS? -



angularjs - How can I pass an object reference to an inner directive in Angular JS? -

i have directive creates autocomplete input

angular.module('autocomplete', [] ) .directive('autocomplete', function (...) { homecoming { restrict: 'e', scope: { "id": "@id", "selectedobject": "=selectedobject", "basesearchurl" : "@basesearchurl" }, templateurl: "..." link: function(...){...} } }

an illustration of usage:

<autocomplete id="favoritemovie" selectedobject='favmovie' searchurl='/rest/movies?search=' />

it works great. want create new, more specific, directive create autocomplete movies, can utilize this:

<autocompletemovie id="favoritemovie" selectedmovie='favmovie'/>

the new directive looks this:

angular.module('autocompletemovie', []) .directive( 'autocompletemovie', function() { homecoming { restrict : 'e', scope : { "id" : "@", "selectedmovie" : "=selectedmovie" }, templateurl : '...' }; });

my html template new component:

<autocomplete id="{{id}}" selectedobject='{{selectedmovie}}' searchurl='/rest/movies?search=' />

but not working. id attribute passed correctly "inner" autocomplete, object reference set selectedmovie attribute not working.

i have made sec try, passing name of object reference instead of object itself:

directive:

angular.module('autocompletemovie', []) .directive( 'autocompletemovie', function() { homecoming { restrict : 'e', scope : { "id" : "@", "selectedmovie" : "@selectedmovie" }, templateurl : '...' }; });

but did not work well.

i hope can understand i'm trying achieve.

[edit] have tried :

<autocomplete id="{{id}}" selectedobject='selectedmovie' searchurl='/rest/movies?search=' />

but doesn't work. object fixed name selectedmovie created on scope, if phone call directive different selectedmovie attribute:

<autocompletemovie id="favoritemovie" selectedmovie='favmovie'/>

in illustration above have object called favoritemovie , not selectedmovie.

[/edit]

try changing:

<autocomplete id="{{id}}" selectedobject='{{selectedmovie}}' searchurl='/rest/movies?search=' />

to

<autocomplete id="{{id}}" selectedobject='selectedmovie' searchurl='/rest/movies?search=' />

the = syntax in directive binds object while {{ }} syntax going interpreted string. id works because @ passes interpreted string value directive.

angularjs angularjs-directive

No comments:

Post a Comment