角度视图未更新

Question

Does anyone know where I am going wrong? 有人知道我要去哪里错吗？ I am trying to load up a new view on a section of the page in AngularJS . 我正在尝试在AngularJS页面的一部分上加载新视图。

I have the following code within sidebar.html : 我在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>

Then my module.js file which contains all my routes looks like this: 然后，包含所有路由的我的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);

When I look at the console I can see that the url being returned is correct but my view isn't updated on the screen. 当我查看控制台时，可以看到返回的url是正确的，但是我的视图没有在屏幕上更新。

Would anyone be able to point out where I'm going wrong, I'm not seeing any errors in my console and the application is loading fine. 任何人都可以指出我要去哪里，在控制台中看不到任何错误，并且应用程序可以正常加载。

Any help is much appreciated 任何帮助深表感谢

The views I'm trying to load reside in modules/main/template/theme1/home.html and modules/main/template/theme2/home.html 我尝试加载的视图驻留在modules/main/template/theme1/home.html和modules/main/template/theme2/home.html

the HTML for these views are as follows: 这些视图的HTML如下：

/theme1/home.html

<h1>This is theme 1</h1>

/theme2/home.html

<h1>This is theme 2</h1>

This is where I am using ui-view : 这是我使用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>

Ok, so we've established that it looks like a routing problem on NodeJS. 好的，因此我们已经确定它看起来像NodeJS上的路由问题。 I am using gulpJS to start up my server like this: 我正在使用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

Make sure you have defined ui-view where you want to render the template: 确保已在要呈现模板的位置定义了ui-view ：

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

~~Update~~ 更新

~~I guess, you should use the template instead of templateUrl :~~ ~~我想，您应该使用 template而不是 templateUrl ：~~

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

Tip 小费

Also, if you want to re-execute your MainPageController on view change (since both the states are same, just the parameter is changing) then you have to use ui-sref-opts : 另外，如果要在视图更改时重新执行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 个解决方案

解决方案1
1 2016-03-07 15:02:01

角度视图未更新

问题描述

1 个解决方案

解决方案1 1 2016-03-07 15:02:01

解决方案1
1 2016-03-07 15:02:01