2014-07-10 37 views
1

我正在處理一個具有幾種不同狀態的隔離範圍自定義指令。 在這個指令中使用ui-router/ui-view來處理狀態是否有意義?ui-router裏面的自定義角度指令,有道理嗎?

這是一個列出筆記的「筆記小部件」。如果沒有筆記,它將顯示一條消息,而不是顯示他們應該添加筆記的列表。如果正在加載筆記,則會顯示筆記正在加載。如果用戶通過單擊上面提到的添加或+來添加註釋,則該視圖是文本框。所以至少有4種不同的觀點。

我最初的直覺是,它會污染指令,並給它一個硬依賴於ui-router和我的應用程序,因爲它定義了狀態。我只是擔心嗎?

+1

似乎有點過於複雜給我。爲什麼不只是使用ng-if和/或ng-show來有條件地顯示消息:如果0註釋,顯示列表如果項目> 0,顯示文本框和臨時隱藏列表(如果「+」按鈕被擊中)。這就是說,AngularJS的美妙之處在於你可以自由處理你想要的東西。但是,personnaly我會以另一種方式,定義我的UI路由器狀態,並在狀態模板中附加指令(如果需要)。 –

+0

@Bonatoc這就是我通常會這樣做的,只需使用帶有$ scope變量的ng-if/ng-switch來控制指令的狀態。有時候,這會讓人感到混亂,但我並沒有一個一致的方法來控制不同指令之間的狀態。真正我要問的是,如果有更好的模式或更復雜的方式來控制單個指令的狀態。 –

回答

1

我會這樣說:是的,請使用ui-router,但不能用於指令 - 將其用於您的應用。事實上,你可以做的最好的事情是閱讀一些博客文章,並通過示例應用程序來理解原則。你很快就會意識到,沒有必要使用UI路由器部分..

The basics of using ui-router with AngularJS(喬爾鉤)

... ui-router全方位開放的狀態機的性質的路由系統。它允許你定義狀態,並將你的應用程序轉換到這些狀態。真正的勝利是它可以讓你解耦嵌套狀態,並以一種優雅的方式做一些非常複雜的佈局。

你需要想想你不同的路由了一下,但一旦你周圍的基於狀態的方法你的頭,我想你會喜歡它...

這裏AngularJS State Management with ui-router(由本Schwartz)

...... AngularJS的新路由器最有趣的事情不是路由器本身,而是它的狀態管理器。您不是將控制器/視圖定位到給定url,而是定位一個狀態。各國在層次結構管理提供父狀態和頁面組件的成分複雜,都在大自然中,而其餘的聲明繼承...

Here我放在一起的所有環節,到目前爲止,針對樣本例如,最有趣的代碼片段sample.js ..

摘要,嘗試在應用程序級別上實現ui-router。然後指令只能由指揮,幫助你的用戶導航,在狀態間漫步...