Angular directive not recognizing scope of controller

Question

First of all I know I am going to have to change the title, hopefully I can better form my question based on the answers.

I am working on a breadcrumb using angular (let me know if the link fails) but for some reason it isn't working as I would expect. Everything seems fine but when I click the link to go to the next page (sorry in advance for the annoying alert). I get the following error...

Uncaught TypeError: Cannot read property 'addCrumbs' of undefined

The directive is clearly working so I am guessing it is this line that is causing the issue...

angular.element('#crumb').scope().addCrumbs(crumbs);

Can someone explain why this is not working?

I am guessing a bit; but it appears in the second index2.html you are accessing the '#crumb' before it is created. Such code may be better put in a controller? — JeffryHouser
– JeffryHouser, Commented Aug 3, 2014 at 16:48
So in that case how would I load it differently for each page? — Jackie
– Jackie, Commented Aug 3, 2014 at 18:03
How would you load what differently for each page? I would only use AngularJS to build a single page application; not a multi-page web site. — JeffryHouser
– JeffryHouser, Commented Aug 3, 2014 at 18:30

meriadec · Accepted Answer · 2014-08-03 17:44:18Z

2

Why you'r doing it wrong :)

First of all, Angular is designed for single page applications and can simulate navigation between pages through modules like ngRoute (official) or ui-router (from Angular UI Team, more powerful, more complicated).
Your example doesn't follow the "Angular way" cause you have two "index" page, I mean, Angular (and your app) is re-loaded each time you click on an internal link so you can't share variables between pages (in your case you want a "breadcrumb" shared between pages).
Your breadcrumb directive should share the breadcrumb array via data binding instead of using an external controller explicitly. See here for more infos.
The ng-repeat directive should be applied to the li element instead of the ol element.

Updated Plunkr

See the updated version of your Plunkr. I added ngRoute module and separated pages. BUT I think it's not a very reusable and clean way for breadcrumbs.

Conclusion

I recommend you to use a dedicated module to handle your breadcrumb, like ng-breadcrumb (see the demo here)

answered Aug 3, 2014 at 17:44

meriadec

2,98321 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jackie Over a year ago

Thanks I think it will take me a bit to get through all of this. I agree with pretty much all that you have said, however, the ngRoute stuff my be a little tough since I am trying to integrate with an existing design. So I was shying away from it at first. I will try to give it another chance and see where I end up. I appreciate your response!

Collectives™ on Stack Overflow

Angular directive not recognizing scope of controller

1 Answer 1

Why you'r doing it wrong :)

Updated Plunkr

Conclusion

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Why you'r doing it wrong :)

Updated Plunkr

Conclusion

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related