在运行时动态分配 ng-controller [英] Dynamically assign ng-controller on runtime

问题描述

我有一种情况需要动态更改控制器，以便相应地影响范围变量.一般结构:

//一些适合所有类型游戏的通用 HTML<div ng-controller="someScopeVar">//游戏类型//一些特定于游戏类型的 ng-models 应该响应控制器的变化，即范围</div

我在这里看到它可以在<代码>ng-repeat.它可以在它之外完成吗?换句话说，我可以告诉 angular 将它作为变量而不是字符串来读取吗?

解决方案

正如评论中所讨论的，angular 有一个非常强大的功能/库来处理这些场景 -ui-router (以其强大的wiki).

ui-router 是需要开发功能性部分的答案 - states，而不是在 view/url 中思考 (引用自主页):

<块引用>

AngularUI Router 是 AngularJS 的路由框架，它允许您将界面的各个部分组织成一个状态机.与 Angular ngRoute 模块中的 $route 服务不同，它是围绕 URL 路由组织的，UI-Router 是围绕 states 组织的，它可以选择附加了路由以及其他行为.

有一些非常有趣的博文:

• 使用 ui-router 的 AngularJS 状态管理 (本·施瓦茨着)

<块引用>

...关于 AngularJS 的新路由器，最有趣的不是路由器本身，而是它附带的状态管理器.不是针对要为给定 url 呈现的控制器/视图，而是针对一个状态.状态在一个层次结构中进行管理，提供父状态的继承和页面组件的复杂组合，同时本质上保持声明性...

• 基础知识在 AngularJS 中使用 ui-router(由 Joel Hooks)

<块引用>

...ui-router 完全包含路由系统的状态机特性.它允许您定义状态，并将您的应用程序转换到这些状态.真正的优势在于它允许您分离嵌套状态，并以优雅的方式进行一些非常复杂的布局.

正是我们需要的一点 - 解耦子状态... 实际上动态更改控制器 ...可以通过 url 更改或只是状态更改 (一个兄弟孩子而不是其他没有改变网址)

<块引用>

您需要以不同的方式考虑您的路由，但是一旦您了解基于状态的方法，我想您会喜欢它...

最后，链接很少，我将其标记为ui-router的圣杯

• 示例应用.在实际操作中，我们可以看到 ui-router 状态机是如何工作的.我们可以加载list作为父状态，然后我们可以选择行项目，它们代表自己的子状态...而父是不重新加载(这里我试图更详细地解释它)

• state.js - 示例应用程序的基本代码段.这是我见过的最好的文档化代码片段之一......花了一些时间阅读，这会给你 80% 的答案:ui-Router 是如何工作的

根据我的经验，这非常适合小型应用程序以及大型系统......喜欢它......

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>

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?

解决方案

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

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 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 State Management with ui-router (by Ben Schwartz)

...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...

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

...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.

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...

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

• 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 - 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-controller的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！