在页面内动态加载 AngularJS 模板 [英] Load AngularJS Template within page, dynamically

问题描述

我有一个包含 2 个控制器的页面:一个管理所谓的应用程序"列表，另一个将新的 Angular 模板放入其 Div 元素的 innerHTML.

<div ng-controller="appList"></div><div ng-controller="appPane">动态内容应该在这里加载！

我尝试过使用标准的 {{expression}} 绑定，但它们不适用于 html，我也尝试过 ng-bind-html-unsafe 指令(将 innerhtml 绑定到应用请求返回的那个)但是控制器不在此新代码中执行.

问题似乎是通过使用绑定，Angular 不会重新解析相关 html 的内容以将其用作 Angular 应用程序.关于如何让它解析动态内容的任何想法?

解决方案

查看uiRouter 模块(来自 AngularUI 项目).它添加了状态的概念，这与路由非常相似，但具有其他优点，例如嵌套它们的能力.例如:

$stateProvider.state('myState', {网址:'/我的状态'，templateUrl: '...',控制器:'MyCtrl'}).state('myState.substate', {网址:'/{子状态}'，templateUrl: '...',控制器:'MySubCtrl'});

MySubCtrl 将在您转到 /mystate/something 时被激活，您可以使用该某物"作为参数(请参阅 $stateParams).您可以将状态嵌套到任意数量的级别.

I have a page containing 2 controllers: one which manages a list of so-called 'apps', and another that is to place the new Angular template into the innerHTML of its Div element.

<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

I have tried using the standard {{expression}} bindings, but they do not work with html, I have also tried the ng-bind-html-unsafe directive (Binding the innerhtml to that of the App request's return) but controllers are not executed within this new code.

The problem seems to be that by using a Binding, Angular is not re-parsing the contents of the html in question to use it as an angular app. Any ideas of how to get it to parse dynamic content?

解决方案

Take a look at the uiRouter module (from the AngularUI project). It adds the concept of states, which are pretty similar to routes, but with other goodies, such as the ability to nest them. For example:

$stateProvider
    .state('myState', {
        url: '/mystate',
        templateUrl: '...',
        controller: 'MyCtrl'
    })
    .state('myState.substate', {
        url: '/{substate}',
        templateUrl: '...',
        controller: 'MySubCtrl'
    });

MySubCtrl will be activated whenever you go to /mystate/something and you can use that "something" as a parameter (see $stateParams). You can nest states to any amount of levels.

这篇关于在页面内动态加载 AngularJS 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！