Angular指令无法识别控制器的范围

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?

Answer 1

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 )