AngularJS ui-router - 模板不显示

Question

我一直在关注 egghead.io 显示应用程序架构的教程，并将相关部分更改为 ui我的应用程序的要求ui评论。

请记住，我是 Angular 的新手，所以希望这是一个容易发现的问题。

我已经为我的应用程序以分层方式设置了多个控制器和模板。我正在使用 ui-路由器。

这是我的 app.start.js 定义和依赖关系

angular.module('sb', [
    'ui.router',
    'angularLocalStorage',
    'events',
    'user'
]

然后我继续定义我的 events.js 控制器和依赖项，以及 stateProvider

angular.module('events', [
    'sb.models.events',
    'events.show',
    'events.list',
    'events.edit',
    'events.create'
])
    .config(function($stateProvider) {
        $stateProvider
            .state('sb.events', {
                url: '/',
                views: {
                    'events@': {
                        controller: 'EventsCtrl as evm',
                        templateUrl: 'app/events/list/event-list.tmpl.html'
                    },
                }
            })
    })

此时，一切正常。但是，当我尝试导航到 url.com/#/events/create 时，我可以在 chrome 开发人员工具中看到正在检索的模板，但它并没有更新实际的可见模板来显示这一点。

这是我的活动-create.js

angular.module('events.create', [

])
    .config(function($stateProvider) {
        $stateProvider
            .state('sb.events.create', {
                url: 'events/create',
                templateUrl: 'app/events/create/event-create.tmpl.html',
                controller: 'EventsCreateCtrl as ecc',
            })
    })

澄清一下，我的主要 html 模板确实有一个 ui-view="events"

任何指点将不胜感激

Answer 1

如果不知道您的 ui-views 在哪里，很难确定（发布一些 html 向我们展示它的结构将对像这样的情况），但这是我根据给定信息做出的最佳猜测：

这里的大问题是您的事件-list.tmpl.html 是否包含 ui-视图？因为它需要一个。当您呼叫您的状态 sb.events.create 时，您要求您的路由器加载它 inside 的主要 ui-视图sb.events-状态。如果该状态的模板 none 实际上包含一个 ui-视图，则它没有地方可以添加 html.

如果您真的想用事件创建模板替换事件列表模板，那么您应该将其命名为 sb.eventsCreate 或类似名称，and/or 以与加载事件列表相同的方式将其加载到 events@。

此外，我认为这不是问题，因为您的事件列表加载正常，但以防万一不清楚：不是 events@ 假设 ui-视图命名事件位于根目录中。如果视图位于 sb 中，则使用相对名称（events，即不带 @）或 events@sb .

Answer 2

有类似的症状，但我的问题是我的标记中有 ng-view (ngRoute) 而不是 ui-view (ui-route)。

Answer 3

只是出现了由不同问题引起的相同症状：将州的 url 定义为驼峰式而不是连字符。

而不是 url: '/someUrl' 有 url: '/some-url'

AngularJS ui-router - 模板不显示

AngularJS ui-router - template not displaying

javascript

angularjs

angular-ui-router