Can I pass a json object as a directive attribute ?

[Noobcodeur]

Hi All,

Just got a qucik question,

I am creating a component and was wondering if I could pass an object as attribute. It is basically a list of url that I would like to set as local scope for a directive for a slideshow/carousel component I am creating.

Something looking like that :

<slideshow imurls="{{ {img1:"/img/ddfdf.png", img2:"/img/gryuy.png"} }}">

</slideshow>

Many thanks,

A.

[Clint Checketts]

You could manually $eval it: http://plnkr.co/edit/KHIGcT3CHReg4xVSaHgy?p=preview

app.directive('slideshow',function(){

  return {

    restrict: 'E',

    link: function(scope, elem, attr){

      var a = scope.$eval(attr.imurls);

      console.log('imurls',a);

    }

  };

});

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Noobcodeur]

Thanks a lot.

The only problem is that I am not using the link function but the compile function as I am modifying the dom template. So I have no access to the scope. ( so no scope.$eval. unfortunately).

Do you reckon I need to parse the string passed as attribute myself ?

It's basically just to be able to extract the urls from the object with a "for..in" loop and modify the background of some div I will append back to "element".

[Clint Checketts]

I suspect you'd want to move this into the link function. But worst case you could inject the $rootScope into the directive and $eval against that

--

[Sander Elias]

Hi A,

If it is just an array off url's why don't you just put in as something like this:
<slideshow imurls="{{ "'/img/ddfdf.png','/img/gryuy.png'" }}">

and then simply do something like:

  images = attr.imurls.split(",")

you might need to do some extra string cleaning, but this way you don't need the link function.

Regards

Sander Elias

[Noobcodeur]

Hi All,

Many thanks for the help.

I ended up using a link function and injecting the compile service. So basically, I tell angular to compile each time I modify the template in the link function.

Well all is clear now except that my widget is still not working but that's probably something else. The debugger doesn't show me anything so might be a mere css problem (I hope).

Good thing is that by using the link function, I was dealing with an object from the begining and not strings (as happens while manipulating dom in compile function). Easier to extract data from.

So basically it is a lot of $compile(dom_or_html_or_jQueryobject)(scope);.

Thanks again for your help really appreciated.