动态分配在运行时的NG-控制器 [英] Dynamically assign ng-controller on runtime

问题描述

我有一个情况我需要动态改变控制器，使范围内的变量进行相应的影响。一般结构：

I have a situation where I need to dynamically change the controller, so that the scope variables are influenced accordingly. General structure:

<div ng-controller="GameController">
   // some general HTML which fits all types of games
    <div ng-controller="someScopeVar"> // Type of game
      // some game-type-specific ng-models that should respond to the change of controller, i.e scope
    </div
</div>

我看了<一个href=\"http://stackoverflow.com/questions/13944207/angularjs-dynamically-assign-controller-from-ng-repeat\">here它可以在 NG-重复内完成。可以在它的外面做些什么呢？
换句话说，我可以告诉角度看它作为一个变量，而不是一个字符串？

I saw here that it can be done within an ng-repeat. Can it be done outside of it? In other words, can I tell angular to read it as a variable rather than a string literal?

推荐答案

由于在评论中讨论的，角有一个非常强大的特性/库用于处理这些场景 - UI路由器 的（以其强大的维基）的

As discussed in the comments, angular has a really powerful feature/library for handling these scenarios - ui-router (with its powerful wiki).

的 UI路由器是一个答案，需要开发功能件 - 美国，甚则认为，鉴于/ URL的（从主页引用）的：

The ui-router is an answer to need to develop functional pieces - states, rather then think in view/url (cite from a home page):

AngularUI路由器是AngularJS路由框架，它允许您将接口部分整理成状态机。不像的 $路线的的角ngRoute模块，它是围绕URL路由组织服务， UI-路由器组织周围的状态，它可以任选地具有的路由，以及其他问题，附

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

有一些非常有趣的博客文章：

There are some very interesting blog posts:

• AngularJS国家管理与UI的路由器的（由本施瓦茨）的

• AngularJS State Management with ui-router (by Ben Schwartz)

...关于AngularJS的新路由器最有趣的事情，是不是路由器本身，而是其附带的状态管理。相反，针对控制器/视图渲染对于一个给定的URL，你的目标的状态。各国在层次结构管理提供父状态和页面组件的成分复杂，都在大自然中，而其余的声明...继承

...The most interesting thing about AngularJS's new router, isn't the router itself, but the state manager that comes with it. Instead of targeting a controller/view to render for a given url, you target a state. States are managed in a heirarchy providing inheritance of parent states and complex composition of page components, all the while remaining declarative in nature...

• 的基础知识使用UI的路由器AngularJS （乔尔钩子）

• The basics of using ui-router with AngularJS (by Joel Hooks)

... UI路由器完全包含了一个路由系统的状态机的性质。它可以让你的定义状态和转换您的应用程序的国家。真正的胜利是，它可以让你的脱钩嵌套状态，并以优雅的方式做了一些非常复杂的布局。

...ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.

正是时候，​​我们所需要的 - 孩子脱钩状态... 动态改变其实控制器 ...可能是通过URL变化，或只是一个状态变化的（一个兄弟的孩子，而不是其他没有改变URL）的

Exactly the point we need - decouple child states... dynamically change the controller in fact ... could be by url change or just a state change (one sibling child instead of other without url change)

您需要考虑您的不同路由一点，但一旦你周围的基于状态的方法你的头，我想你会喜欢它...

You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it...

最后，有几个环节，我将标志着作为UI路由器的圣圣杯

Finally, there are few links, which I would mark as the saint grail of ui-router




• 示例应用程序。在行动中，我们可以看到，在UI路由器状态机如何做的工作。我们可以加载列表的一个父状态，然后我们可以选择行项目，其中做重新present自己的子状态 ..虽然父母不重装的（这里 我试图解释它的更多详细信息）的

• Sample application. In action we can see, how the ui-router state machine does work. We can load list as a parent state, then we can select row items, which do represent their own child state... while parent is not reloading (here I tried to explain it in more details)

state.js - 示例应用程序的code的不可或缺的一部分。这是最好的证明code段我见过的一个......花了一些时间去通过，这将会给你答案的80％百分比：如何 UI-路由器工作

state.js - the essential piece of code of the sample application. This is one of the best documented code snippets I've seen... Spent some time to go through and this will give you the 80% percent of answers: How ui-Router is working

从我的经验，这实在是适合小型应用程序，以及为大型系统...喜欢...

From my experience, this is really suitable for small apps as well as for large scale systems... love it...

这篇关于动态分配在运行时的NG-控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！