Angular 1 ui-router重复查看视图

时间:2016-11-11 11:08:25

标签: javascript angularjs angular-ui-router

我有一个路由器设置如下:

     $urlRouterProvider.otherwise(function($injector) {
            var $state = $injector.get("$state");
            $state.go('app');
        });
        $stateProvider
            .state('app', {
                templateUrl: 'index.html',
                controller: 'AppCtrl',
                resolve: {
                    trans: ['RequireTranslations',
                        function(RequireTranslations) {
                            RequireTranslations('shared');
                        }
                    ],
                    dep: ['trans', '$ocLazyLoad',
                        function(trans, $ocLazyLoad) {
                            return $ocLazyLoad.load(['ui-bs-paging', 'ui-bs-modal']).then(
                                function() {
                                    return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
                                }
                            );
                        }
                    ]
                }
            .state('app.shares', {
                url: "/shares",
                templateUrl: "app/modules/shares/views/shares.html",
                controller: 'ShareCtrl',
                resolve: {
                    trans: ['RequireTranslations',
                        function(RequireTranslations) {
                            RequireTranslations('modules/shares');
                        }
                    ],
                    dep: ['trans', '$ocLazyLoad',
                        function(trans, $ocLazyLoad) {
                            return $ocLazyLoad.load(['ShareServiceModule']).then(
                                function() {
                                    return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
                                }
                            );
                        }

                    ]
                }
            })
});

我的索引就像:

 <div id="page-content-wrapper">
            <div class="row header" id="header">
                <div class="col-xs-6">
                    <a href="##">
                        <img class="svg-1 pull-left" src="assets/img/header_logo.svg" alt="Pwc">
                    </a>
                    <i class="separator pull-left"></i>
                    <h1 class="header-text pull-left"> Sustainability Tool </h1>
                </div>
                <div class="col-xs-6">
                    <button type="button" ng-class="hamburger" class="hamburger animated fadeInLeft" data-toggle="offcanvas" ng-click="sidebarClick()"><span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span></button>
                </div>
            </div>
            <!-- main app content ui-view include -->
            <div ui-view data-anim-sync="true" class="anim-in-out anim-slide-below-fade" data-anim-speed="500">
                <div class="home">
                    <section class="banner">
                        <img src="assets/img/home_hero.jpg">
                    </section>
                    <section class="intro">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <h1>{{'pwc.sus.home.intro.title.label' | translate}}</h1>
                                </div>
                                <div class="col-md-12">
                                    <h2>{{'pwc.sus.home.intro.subtitle.label' | translate}}</h2>
                                </div>
                                <div class="col-md-4 col-md-offset-4">
                                    <p>{{'pwc.sus.home.intro.description.label' | translate}}</p>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="features">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <h1>
                        <h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
                                    </h1>
                                    <p>
                                        <h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="footer section">
                <div class="row disclaimer">
                    <div class="col-xs-6">
                        <span class="footer-text footer-text-hack">© PwC, 2016. All Rights Reserved.</span>
                    </div>
                    <div class="col-xs-6">
                        <span class="pull-right footer-text"> Legal Disclaimer </span>
                    </div>
                </div>
            </div>
        </div>

路由器工作正常但是标题和所有页脚内容都像这样重复(重复的ui-view):

enter image description here

有人可以帮这个Angular新手吗? TNKS。

0 个答案:

没有答案