.state('content.photos.detail.comment',{ url:'/comment?skip&limit', templateUrl: 'partials/photos-detail-comment.html', controller: 'PhotoCommentController', controllerAs: 'ctrPhotoComment' })
controllers.js 中修改如下
photoGallery.controller('HomeController',['$scope', '$state', function($scope, $state){ this.message = 'Welcome to the Photo Gallery'; }]); //别名：ctrPhoto photoGallery.controller('PhotoController',['$scope','$state', function($scope, $state){ this.photos = [ { id: 0, title: 'Photo 1', description: 'description for photo 1', imageName: 'image1.JPG', comments:[ { name:'User1', comment: 'Nice', imageName: 'man.png'}, { name:'User2', comment:'Very good', imageName: 'man.png'}, { name:'User3', comment:'Nice', imageName: 'woman.png'}, { name:'User4', comment:'Very good', imageName: 'woman.png'}, { name:'User5', comment:'Very good', imageName: 'man.png'}, { name:'User6', comment:'Nice', imageName: 'woman.png'}, { name:'User7', comment:'So so', imageName: 'man.png'} ]}, { id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.JPG', comments:[ { name:'User1', comment: 'Nice', imageName: 'man.png'}, { name:'User2', comment:'Very good', imageName: 'man.png'}, { name:'User3', comment:'Nice', imageName: 'woman.png'}, { name:'User4', comment:'Very good', imageName: 'woman.png'} ]}, { id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.JPG', comments:[ { name:'User1', comment: 'Nice', imageName: 'man.png'}, { name:'User2', comment:'Very good', imageName: 'man.png'}, { name:'User3', comment:'Nice', imageName: 'woman.png'}, { name:'User4', comment:'Very good', imageName: 'woman.png'}, { name:'User5', comment:'Very good', imageName: 'man.png'}, { name:'User6', comment:'Nice', imageName: 'woman.png'}, { name:'User7', comment:'So so', imageName: 'man.png'} ]}, { id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.JPG', comments:[ { name:'User6', comment:'Nice', imageName: 'woman.png'}, { name:'User7', comment:'So so', imageName: 'man.png'} ]} ]; //给子state下controller中的photos赋值 this.pullData = function(){ $scope.$$childTail.ctrPhotoList.photos = this.photos; } }]); //别名：ctrPhotoList photoGallery.controller('PhotoListController',['$scope','$state', function($scope, $state){ this.reading = false; this.photos = new Array(); this.init = function(){ this.reading = true; setTimeout(function(){ $scope.$apply(function(){ $scope.ctrPhotoList.getData(); }); }, 1500); } this.getData = function(){ //调用父state中controller中的方法 $scope.$parent.ctrPhoto.pullData(); /*this.photos = $scope.$parent.ctrPhoto.photos;*/ this.reading = false; } }]); //别名：ctrPhotoDetail photoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){ var id = null; this.photo = null; this.init = function(){ id = parseInt($stateParams.id); this.photo = $scope.ctrPhoto.photos[id]; } } ]); photoGallery.controller('PhotoCommentController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){ var id, skip, limit = null; this.comments = new Array(); this.init = function(){ id = parseInt($stateParams.id); var photo = $scope.ctrPhoto.photos[id]; if($stateParams.skip){ skip = parseInt($stateParams.skip); }else{ skip = 0; } if($stateParams.limit){ limit = parseInt($stateParams.limit); }else{ limit = photo.comments.length; } this.comments = photo.comments.slice(skip, limit); } } ]);
也就是，$stateParams不仅可以接收路由参数，还可以接收查询字符串参数。
photo-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> <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>
以上，通过ui-sref=".comment({skip:0, limit:2})把查询字符串传递出去。
photos-detail-comment.html