失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > angularJS监听路由变化改变页面内容

angularJS监听路由变化改变页面内容

时间:2019-01-04 07:34:05

相关推荐

angularJS监听路由变化改变页面内容

在使用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监听路由变化改变页面内容》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。