Angular指令無法識別控制器的范圍

Question

首先，我知道我將不得不更改標題，希望我可以根據答案更好地提出我的問題。

我正在使用angular制作面包屑 （讓我知道鏈接是否失敗），但是由於某種原因，它無法正常工作。 一切似乎都很好，但是當我單擊鏈接轉到下一頁時（對於煩人的警報，請提前表示抱歉）。 我收到以下錯誤...

未捕獲的TypeError：無法讀取未定義的屬性'addCrumbs'

該指令顯然是有效的，所以我猜想這是導致此問題的這一行...

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

有人可以解釋為什么這行不通嗎？

Answer 1

為什么你做錯了:)

• 首先，Angular是為單頁應用程序設計的，並且可以通過ngRoute（官方）或ui-router（來自Angular UI Team，功能更強大，更復雜）之類的模塊來模擬頁面之間的導航。

• 您的示例未遵循“ Angular方式”，因為您有兩個“索引”頁面，我的意思是，每次單擊內部鏈接時都會重新加載Angular（和您的應用程序），因此您無法在頁面之間共享變量（在您的情況下，您希望頁面之間共享一個“面包屑”）。

• 您的breadcrumb指令應通過數據綁定而不是顯式使用外部控制器來共享breadcrumb數組。 有關更多信息，請參見此處 。

• ng-repeat指令應應用於li元素而不是ol元素。

更新的Plunkr

請參閱Plunkr的更新版本 。 我添加了ngRoute模塊並分隔了頁面。 但是我認為這不是面包屑的非常可重用和干凈的方式。

結論

我建議您使用專用模塊來處理面包屑，例如ng-breadcrumb （請參見此處的演示 ）