CODEWITHSUNDEEP
angularjsangularjs-directive
Ben
Ben

Reputation: 13352

ng-repeat scope not available to a directive within it

I have a directive that is repeated by an ng-repeat.

<div ng-repeat="p in people">
  <p>{{p.name.first}}</p>
  <slider-box
    title-text="{{p.name.first}}"
    body-text="Some body text"
    img-src="{{p.photo}}"
    more-link="#"></slider-box>   
  </div>
</div>

If I put a <p>{{p.name.first}}</p> before the directive, the p shows off a first name, but the slider-box doesn't seem to have access to p and therefore comes up blank as there's no data being given to it.

It probably isn't an async issue, as there are boxes being created, so angular knows that there is something to ng-repeat , and the <p> is getting filled in.

I've made an an example site here that shows an example of the directive with dummy data (just strings) and then the repeated ones are below that.

A very similar question has been asked here but no code examples were posted and the trail seems to have gone dead.

Upvotes: 1

Views: 98

Answers (1)

Yann
Yann

Reputation: 2221

You should pass the attributes into the scope directly in the directive declaration.

In your directive declaration, instead of just having scope: {} , have something like scope:{ imgSrc:"@" }. It will pass the value of the attribute directly inside the isolated scope of your directive.

Take a look at this short tutorial for a better explanation.

Upvotes: 1

Related Questions