Angularjs：查找指令的所有實例

Question

我正在嘗試創建一個指令，允許用戶使用箭頭鍵逐節瀏覽頁面。但我也希望能夠將這些部分分散在dom中，並且在添加和刪除東西時不會中斷這些部分。我能想到的幾種方法可以做到這一點，但他們都不是令人滿意的：

• 創建一個控制器，讓其他指令自己註冊一個指令（和註銷在$銷燬）。但是如果我稍後在中間添加一些內容，這將會失靈。另外，我試過用這種方式寫它，而且看起來好像沒有必要的代碼。

• 每當用戶敲擊箭頭鍵時，創建一個空數組，然後$廣播一個事件，用回調指令在該列表上註冊自己。然後，一旦這個列表已滿，向前或向後退出。他們（應該？）按照他們在DOM中的順序回來，但我不確定，因爲這種方式看起來很瘋狂和駭人聽聞。

• 用css標記'tabbable'的東西，然後用jquery寫這個簡單的方法，就像這樣：在一個新的點擊事件中，var all = $('.tabbable')，然後做那個很明顯。但我真的不想這樣做，因爲它不是'有角度'的方式。不是出於某種純粹的感覺，而是因爲我將它作爲一個更大的小部件庫的一部分來構建，並且我希望這個功能可以被他們接受。

那麼，有沒有什麼辦法，我讓某一類型的所有指令的範圍，而不訴諸怪異的黑客，或者所有的地方出蔓延的邏輯是什麼？

Answer 1

AngularJS services是單例，可以通過依賴注入來要求。你可以讓你的指令需要一個狀態管理器服務並調用增量/減法器。

或者，稍微簡單一點，但更脆弱，你可以在$ rootScope中保存一個數組。它比jquery selector全局更具慣用的「角度」（但不是太多），但如果你正在構建一個widget庫，可能不是最好的路線。

Answer 2

這是一個很好的問題。 +1

首先，按類型查找所有指令或節點都違反了Angular方式。 View是AngularJS的官方記錄，因此指令應該說明他們做了什麼並且做他們所說的話。在某處編寫某個過程來掃描DOM節點並採取相應措施有幾個原因是有問題的，其中最重要的是關注點和可測試性的分離。

我很高興看到您正在查看其他選項，但我同意您提供的其他選項對於您提到的原因而言是次優的。但我還有一個。這是我用於不同的應用程序，但這需要分散DOM節點的知識。

首先，我們創建一個服務來管理這個組件的狀態。這很簡單。我們稱之爲SectionsService。接下來，我們創建一個註冊章節的指令。爲了簡單起見，我們稱之爲section。 section指令在其鏈接階段註冊DOM節點的ID（可能以編程方式創建，以確保唯一性），SectionsService。由於DOM按順序處理（大部分），所以添加到SectionsService的節點也將按順序排列。因此，DOM看起來是這樣的（忽略不相關的東西）：

<div section>...</div> 

<!-- other stuff --> 

<div section>...</div> 

<!-- other stuff --> 

<!-- etc. --> 

（雖然在這裏的範圍，它不會是很難給它以這樣一種方式，訂單不會有問題程序，但它'd基於你的應用程序的細節，我不知道。）

接下來，你創建你的觸發器，就像一個箭頭鍵處理程序。在這些事件中，您只需指示SectionService轉到列表中的上一個/下一個節點。 AngularJS帶有一個名爲$anchorScroll的服務，可用於模擬我們熟悉的基於哈希的瀏覽器定位。如果你願意，你顯然也可以使用jQuery插件爲滾動設置動畫。

就是這樣！一個非常簡單的指令，一個相當簡單的服務，以及你需要的任何觸發器。總而言之，我猜測不到100行代碼，包括測試。所有組件都是分離的，並且易於測試，但仍然非常簡單。這個觀點仍然是真理。角度的方式被保留。

而且有很多歡樂。

---

我希望這可以讓你朝着正確的方向發展，但當然可以隨時提出後續問題。如果你願意，我們也可以談論代碼細節;正如我所說，他們不會很複雜。