Angular - 无法加载视图答案

【问题标题】：Angular - Unable to load viewAngular - 无法加载视图
【发布时间】：2014-06-08 05:22:37
【问题描述】：

我正在努力了解如何在页面加载时将视图加载到动态模板中。我的应用程序具有基于设备宽度的不同模板。目前模板加载没有问题，但是当涉及到视图时，我不确定如何注入它。

<div data-ng-view></div> seems to be empty.

我创建了一个fiddle

再次感谢您的帮助。

【问题讨论】：

要使用角度路由，您必须注入 ngRoute 模块。尝试安装 angular-route 包并将 'ngRoute' 添加到 angular 模块依赖项。
那个小提琴适合我...
嗨@niba，如果你使用的是 1.2.xxx 版本，我相信你只需要使用 ngRoute。
@Nix，我根本没有加载视图模板。我在数组中得到了正确的行。
@Jimi 我想你正在处理这个stackoverflow.com/questions/16674279/…

标签： javascript angularjs angularjs-ng-repeat angular-ui-bootstrap

【解决方案1】：

这是评论中提到的问题。在ng-include 中使用ng-view。我拿了你的小提琴并添加了$route.reload()，它可以工作。我还必须在您的路线配置中重命名为 one.html。

http://jsfiddle.net/Lb4em/

旁注：

您的模板网址应为：

templateUrl: '/one.html',

是templateUrl: 'views/steps/one.html',

<script type="text/ng-template" id="/one.html"></script>

关于更好方法的想法

@Jimi ui 路由器在将逻辑与“url”同步时更加友好。例如。在 UI 路由器中，您可以拥有一个可以执行所有操作的抽象状态，并在 URL 更改时拥有像 root/one root/two 这样的子状态 ui-router 足够聪明，可以检测到 root 将同时存在于两者中，因此它不会重新加载控制器。这允许您打开 $state.current.name == 'root.one' 。然后你可以有条件地包含或只包含模板逻辑。它也不会刷新整个ng-view，只会刷新附加到状态的ui-view。

ui-router 是一个非常强大的库。在您查看他们的文档/教程之前，上述大部分内容都没有意义。

【讨论】：

我有点困惑？加载模板，模板包含手风琴，然后将视图加载到手风琴的行中。如果我更改模板 URL，我只会得到视图。我想要模板 > 视图。
@Jimi 我更新了小提琴并且它至少出现了。我认为您的设置方式会遇到问题。
谢谢，非常感谢。您建议我对代码进行哪些更改？
再次感谢您的帮助> 我会去图书馆看看。

【解决方案2】：

我认为您需要在 app.js 中进行一些配置。请参考下面的代码，因为我已经做了一些 url 映射，我们必须指定控制器和 templateUrl。

var vrmUI = angular.module('vrmUI', []);
vrmUI.config(function($routeProvider) {

$routeProvider
        .when('/', {
            controller: 'DashboardController',
            templateUrl: 'views/dashboard.html'
        })
        .when('/change-password', {
            controller: 'ChangePasswordController',
            templateUrl: 'views/change-password.html'
        })
        .when('/network-config', {
            controller: 'NetworkConfigController',
            templateUrl: 'views/network-config.html'
        })
        .when('/dashboard', {
            controller: 'DashboardController',
            templateUrl: 'views/dashboard.html'
        });

return vrmUI;
});

【讨论】：