photoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){ var id = null; this.photo = null; this.viewObj = null; this.init = function(){ id = parseInt($stateParams.id); this.photo = $scope.ctrPhoto.photos[id]; this.viewObj = JSON.parse(sessionStorage.getItem($stateParams.id)); } } ]);
photos-detail.html
<h1>photo-details</h1> <a ui-sref=".comment">通过相对路径去子state</a> <a ui-sref="content.photos.list"> <i></i> </a> <div ng-init="ctrPhotoDetail.init()"> <img ng-src="../assets/images/{{ctrPhotoDetail.photo.imageName}}"> <div> <div> <i>Views <span>{{ctrPhotoDetail.viewObj.views}}</span></i> </div> <div> <i>Viewing <span>{{ctrPhotoDetail.viewObj.viewing}}</span></i> </div> <h4>{{ctrPhotoDetail.photo.title}}</h4> <p>{{ctrPhotoDetail.photo.description}}</p> </div> <div> <button ui-sref=".comment({skip:0, limit:2})">Comments</button> </div> </div> <div ui-view></div>
StateChangeStart事件
controller.js 增加如下
photoGallery.controller('RootController', ['$scope', '$state', '$rootScope', function($scope, $state, $rootScope){ $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ if(toState.data.required && !$rootScope.user){ event.preventDefault(); $state.go('content.login'); } }); } ]);
修改content这个state:
.state('content',{ url:'https://www.jb51.net/', abstract: true, data:{ user: "user", password: "1234" }, views:{ "":{ templateUrl: 'partials/content.html', controller: 'RootController' }, "header@content":{ templateUrl: 'partials/header.html', controller: function($scope, $rootScope, $state){ $scope.logoff = function(){ $rootScope.user = null; } } } } })
content.photos.detail这个state
.state('content.photos.detail',{ url:'/detail/:id', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs: 'ctrPhotoDetail', data:{ required: true }, resolve:{ viewing: function($stateParams){ return{ photoId: $stateParams.id } } }, onEnter: function(viewing){ var photo = JSON.parse(sessionStorage.getItem(viewing.photoId)); if(!photo){ photo = { views: 1, viewing: 1 } }else{ photo.views = photo.views + 1; photo.viewing = photo.viewing + 1; } sessionStorage.setItem(viewing.photoId, JSON.stringify(photo)); }, onExit: function(viewing){ var photo = JSON.parse(sessionStorage.getItem(viewing.photoId)); photo.viewing = photo.viewing - 1; sessionStorage.setItem(viewing.photoId, JSON.stringify(photo)); } })
以上，添加了
data:{ required: true }
同理，content.photos.detail.comment这个state
.state('content.photos.detail.comment',{ url:'/comment?skip&limit', templateUrl: 'partials/photos-detail-comment.html', controller: 'PhotoCommentController', controllerAs: 'ctrPhotoComment', data:{ required: true } })
StateNotFound事件
photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',
function($scope, $state, $rootScope){
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go('content.login');
return;
}
});
$rootScope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams){
event.preventDefault();
$state.go('content.notfound');
});
}
]);
添加一个state:
.state('content.notfound',{ url:'notfound', views: { "body@content": {templateUrl: 'partials/page-not-found.html'} } })
page-not-found.html
<div> <i></i><h3>404 - Sorry! Not found your page.</h3> </div>
StateChangeSuccess事件
photosGallery.controller('RootController', ['$scope', '$state', '$rootScope', function($scope, $state, $rootScope){ $rootScope.accessLog = new Array(); $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ if(toState.data.required && !$rootScope.user){ event.preventDefault(); $state.go('content.login'); return; } }); $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ event.preventDefault(); $state.go('content.notfound'); }); $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $rootScope.accessLog.push({ user: $rootScope.user, from: fromState.name, to: toState.name, date: new Date() }); }); } ]);
添加一个state
.state('content.log',{ url:'log', data:{ required: true }, views: { "body@content": {templateUrl: 'partials/log.html'} } })
log.html