Question

我一直在关注egghead.io的教程，该教程展示应用程序架构，并更改相关部分以满足我的应用程序的要求。

请记住，我对Angular很新，所以希望这个问题很容易发现。

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

这是我的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开发人员工具中检索到的模板，但是它没有更新实际的可见模板来显示这个。

这是我的events-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来向我们展示它的结构在这样的情况下会有多大帮助），但这是我最好的猜测来自给定的信息：

这里最大的问题是你的event-list.tmpl.html是否包含一个ui-view？因为它需要一个。当你调用你的状态 sb.events.create 时，你要求你的路由器在 sb.events 的主要ui视图中加载它 > -state。如果该状态的模板中没有一个实际包含ui-view，则无法添加html。

如果您确实想要使用事件创建模板替换事件列表模板，那么您应该将其命名为 sb.eventsCreate 或类似模板，和/或将其加载到 events @ < / em>与加载事件列表的方式相同。

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

Answer 2

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

Answer 3

由于另一个问题引起的症状相同：将状态的url定义为camelCase而不是连字符。

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

AngularJS ui-router - 模板不显示

3 个答案: