2014-07-10 41 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。然后指令只能由指挥,帮助你的用户导航,在状态间漫步...