使用路由分发的结果,就是每次路由到指定url的时候,页面会整体刷新。之前无论打开过多少的页面,会被全部关闭。
var cspRouters = angular.module('cspRouters', ['ui.router']);
cspRouters.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
views: {
'': {
templateUrl: 'tpls/home/index.html'
}
}
})
.state('comment',{
url: '/comment',
views: {
'': {
templateUrl: 'tpls/comment/index.html',
}
}
})
})
如上,当页面url由home到comment的时候,之前在home下的所有页面将被comment的内容取代。
而我们经常使用的系统,用户一定会更希望每次打开多个页面,在多个页面之间来回切换,就像是浏览器,打开的不同网站,但是打开其他的网页不会关闭之前打开的页面。
怎么解决这个问题呢?
<div class="item" ng-class="{'active':controller.active}" ng-repeat="controller in controllers"
ng-click="setTabActive(controller)">
{{controller.name}}
<i class="close icon close_icon" ng-click="closeController(controller,$index)" ></i>
</div>
这里每一个controller对应的是一个功能模块。点击导航栏中的功能,将对应的controller加入到controllers中。在右侧的展示区ng-repeat方式展示出来就可以。