gpt4 book ai didi

javascript - ng-click 在模板中只工作一次,但在返回页面后停止工作

转载 作者:行者123 更新时间:2023-11-30 00:12:55 25 4
gpt4 key购买 nike

我有一个单页应用程序网站,我希望菜单选项卡在选择页面时将类更改为事件状态。在我的 home.html 模板中,我有一个 <a>标记链接到我的历史页面。单击此链接时,历史菜单项应该有一个事件类。它在我第一次加载网站时有效,但如果用户在历史页面和主页之间来回切换,它将无法正常工作。有什么想法吗?
请注意,菜单和主页内容都是我使用 ng-include 和 ui-view(通过 ui-router)加载的模板。
索引页:

<body onresize="setWidth()" ng-app="app" ng-controller="changeTab">

<div data-role="page" >

<!--include the menuTemplate set the current index to appropriate value-->
<div ng-include="'templates/menuTemplate.html'"></div>

</div>
<div data-role="main" class="ui-content">
<div ui-view></div>
</div>
</body>

menuTemplate.html:

<nav class="navbar navbar-default" id="desktopNav">
<div class="container-fluid">
<div class="topNav">
<ul class="nav navbar-nav">
<li ng-click="setIndex(0)" ng-class="(index==0)? 'active':''"><a id="homeButton" ui-sref="home">Home</a></li>
<li ng-click="setIndex(1)" ng-class="(index==1)? 'active':''"><a ui-sref="history">History</a></li>
<li ng-click="setIndex(2)" ng-class="(index==2)? 'active':''"><a ui-sref="ensembles">Ensembles</a></li>
<li ng-click="setIndex(3)" ng-class="(index==3)? 'active':''"><a ui-sref="staffs">Staffs</a></li>
<li ng-click="setIndex(4)" ng-class="(index==4)? 'active':''"><a ui-sref="career">Career</a></li>
<li ng-click="setIndex(5)" ng-class="(index==5)? 'active':''"><a ui-sref="contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

home.html (VIEW) 模板:

<p><a href="history" ng-click="setIndex(1)">Learn more...</a></p>

Angular JS:

angular.module('app').controller('changeTab',['$scope', function($scope){
$scope.index;

$scope.setIndex = function(val){
$scope.index=val;
}

$scope.getIndex = function(val){
return $scope.index;
}
}]);

最佳答案

ui-sref-active 会帮你省去 ng-clickng-class 的麻烦:

<nav class="navbar navbar-default" id="desktopNav">
<div class="container-fluid">
<div class="topNav">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a id="homeButton" ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="history">History</a></li>
<li ui-sref-active="active"><a ui-sref="ensembles">Ensembles</a></li>
<li ui-sref-active="active"><a ui-sref="staffs">Staffs</a></li>
<li ui-sref-active="active"><a ui-sref="career">Career</a></li>
<li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

关于javascript - ng-click 在模板中只工作一次,但在返回页面后停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35716806/

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