gpt4 book ai didi

javascript - Angular View 未更新

转载 作者:行者123 更新时间:2023-11-27 23:15:42 25 4
gpt4 key购买 nike

有人知道我错在哪里吗?我正在尝试在 AngularJS 页面的一部分上加载新 View 。

我在 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 是正确的,但屏幕上的 View 未更新。

任何人都可以指出我哪里出错了,我在控制台中没有看到任何错误,并且应用程序加载正常。

非常感谢任何帮助

我尝试加载的 View 位于modules/main/template/theme1/home.htmlmodules/main/template/theme2/home.html

这些 View 的 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'
}
}));
});

最佳答案

确保您已定义 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 View 更改时(因为两个状态相同,只是参数发生变化),那么您必须使用 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>

关于javascript - Angular View 未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35846893/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com