Question

我在angular.js应用中使用ng-boilerplate和ui-router。我有3部分布局，顶部栏，侧边栏和主要布局。我使用ng-switch在主布局中显示不同的视图。这是我的index.html的样子

<div class="slide-animate" ng-include="HeaderTemplate"></div>
<div class="slide-animate" ng-include="SidebarTemplate"></div>
<div ng-switch on="section">
     <div ui-view="secion1" class="secion1" ng-switch-when="secion1"></div>
     <div ui-view="secion2" class="secion2" ng-switch-when="secion2"></div>
     <div ui-view="secion3" class="secion3" ng-switch-when="secion3"></div>
</div>

我的HeaderTemplate和SidebarTemplate正在呈现，但主要布局未呈现。

我在section中检查了$scope的值。这是section1这很好，当我在开发人员工具中检查时，这是DOM的样子

<div ng-switch="" on="section">
                <!-- ngSwitchWhen: section1 --><div ui-view="section1" class="section1 ng-scope" ng-switch-when="section1"><!-- ui-view-anchor --></div>
                <!-- ngSwitchWhen: section2 -->
                <!-- ngSwitchWhen: section3 -->
            </div>

所以这里选择了正确的部分，但ui-view只显示了评论ui-view-anchor。（我不知道那是什么。）。我查看了我的html源代码，看看我是否为我的section1，section2等获取了模板，我看到我正在获取它们。我在templates-app.js中看到了，我正在为我的部分获取HTML。知道为什么它不会在获取它时呈现html吗？我的$stateProvider配置如下所示

$stateProvider.state('section1', {
            url: '/section1',
            views: {
                "section1": {
                    controller: 'Section1Ctrl',
                    templateUrl: 'section1/section1.tpl.html'
                }
            },
            data: { pageTitle: 'Section 1' }
        });

等等。

Answer 1

ui-router v0.2.8看起来已被破坏或与angular.js v1.2.12不兼容。我切换回ui-router v0.2.7一切正常

ui-view不会使用ng-boilerplate呈现

1 个答案: