Question

我正试图了解如何在页面加载时将视图加载到动态模板中。我的应用程序根据设备宽度有不同的模板。目前模板加载没有问题但是当涉及到视图时我不知道如何注入它。

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

我创建了fiddle

再次感谢您的帮助。

Answer 1

这是评论中提到的问题。在ng-view中使用ng-include。我拿了你的小提琴并添加了$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路由器与＆＃34; urls＆＃34;同步逻辑时更友好。例如。在UI路由器中，你可以拥有一个完成所有事情的抽象状态，并且当URL发生变化时会有root/one root/two这样的子状态ui-router足够聪明，可以检测到两者都存在，所以它不会重新加载控制器。这允许您打开$ state.current.name ==＆＃39; root.one＆＃39; 。然后你可以有条件地包含或只是拥有模板逻辑。它也不会刷新整个ng-view它只会刷新附加到州的ui-view。

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

Answer 2

我认为您需要在app.js中进行一些配置。请参考下面的代码，因为我已经完成了一些url映射，我们必须指定controller和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;
});

Angular - 无法加载视图

2 个答案: