在使用angularJS开发单页面应用时,点击导航的标题切换路由往往需要改变改变页面的标题,以及改变导航栏相关标题的样式,此时监听路由变化作出相应的操作即可。
示例:监听路由变化改变页面标题:
app.js:
var app = angular.module("myModule", ['ui.router']);app.run(['$rootScope', '$log', function($rootScope, $log){$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){$rootScope.title = toState.title;//在相关的路由中添加title});}]);
相关路由配置:
$stateProvider.state("index",{url:"/index",views: {'': {templateUrl: 'views/home/index.html'},'main@index': {templateUrl: 'views/home/navigation.html'}},title: '科普·羊城微网站'})// 资讯动态.state("index.news",{url:"/news", views: {'main@index': {templateUrl: 'views/modules/news/news.html',controller: 'newsCtrl',resolve: {loadCtrl: ["$q", function($q) {var deferred = $q.defer();//异步加载controller/directive/filter/servicerequire(['directives/myDirective','filters/sexFilter','controller/newsCtrl'], function() {deferred.resolve(); });return deferred.promise;}]},}},title: '资讯动态'})
index.html:
<!--给页面title绑定数据,实现动态改变页面title--><title ng-bind="title"></title>
如果觉得《angularJS监听路由变化改变页面内容》对你有帮助,请点赞、收藏,并留下你的观点哦!