Question

有谁知道我哪里出错了？我正在尝试在AngularJS中的页面部分加载新视图。

我在sidebar.html中有以下代码：

<ul>
    <li><a ui-sref="MainPage({themeName:'theme1'})">Theme 1</a></li>
    <li><a ui-sref="MainPage({themeName:'theme2'})">Theme 2</a></li>
</ul>

然后包含我所有路由的module.js文件如下所示：

var main = {
    name: "MainPage",
    url: "/:themeName",
    views: {
        "mainContent": {
            controller: "MainPageController",
            templateUrl: function($stateParams){
                var url =  'modules/main/template/' + $stateParams.themeName + '/home.html';
                console.log(url);
                return url;
            },
        },
        "sidebar":{
            templateUrl: "modules/main/template/sidebar.html",
            controller: "SidebarController"
        }
    }
};
$stateProvider.state(main);

当我查看控制台时，我可以看到返回的url是正确的，但我的视图未在屏幕上更新。

是否有人能够指出我出错的地方，我在控制台中没有看到任何错误，并且应用程序正常加载。

非常感谢任何帮助

我尝试加载的观看点位于modules/main/template/theme1/home.html和modules/main/template/theme2/home.html

这些视图的HTML如下：

/theme1/home.html

<h1>This is theme 1</h1>

/theme2/home.html

<h1>This is theme 2</h1>

这是我使用ui-view：

的地方

<body>
    <!-- SIDEBAR -->
    <div id="sidebar" class="col-md-2 animated fadeIn" ui-view="sidebar" ng-cloak>
    <div ng-include="modules/main/template/sidebar.html"></div>
    </div>
    <!-- HEADER -->
    <div id="header" class='col-md-10'>
        <img src='assets/images/logo.png' alt='' width='270' />
        <ul class="breadcrumb">
            <li class="active">{{ 'MAIN.NAVIGATION.LINK1' | translate }}</li>
            <li><a href="#">{{ 'MAIN.NAVIGATION.LINK2' | translate }}</a></li>
            <li><a>{{ 'MAIN.NAVIGATION.LINK3' | translate }}</a></li>
        </ul>
    </div>
    <!-- MAIN CONTENT -->
    <div id="main-container" class="col-md-10 animated fadeIn" ui-view="mainContent" ng-cloak></div>
    <div id="footer" class="col-md-12"><p>This is a test site</p></div>
    <!-- SCRIPTS -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="lib/all.js"></script>
    <script src="modules/app.js"></script>
</body>

好的，我们已经确定它看起来像NodeJS上的路由问题。我正在使用gulpJS启动我的服务器：

gulp.task('server', function() {
  gulp.src([DIRDEST])
    .pipe(webserver({
          fallback : 'index.html',
          livereload : false,
          open : false,
          directoryListing: {
            enable: true,
            path:   'target/index.html'
          }
      }));
});

Answer 1

确保您已定义要在其中呈现模板的ui-view：

<div ui-view="mainContent"></div>

<击> 的更新

<击>
我想，您应该使用template代替templateUrl：

template: function($stateParams){ var url = 'modules/main/template/' + $stateParams.themeName + '/home.html'; console.log(url); return url; }

<击>

提示

此外，如果您想在视图更改时重新执行MainPageController（因为两个状态相同，只是参数正在更改），那么您必须使用ui-sref-opts：

<ul> <li><a ui-sref="MainPage({themeName:'theme1'})" ui-sref-opts="{reload: true}">Theme 1</a></li> <li><a ui-sref="MainPage({themeName:'theme2'})" ui-sref-opts="{reload: true}">Theme 2</a></li> </ul>

角度视图未更新

1 个答案: