asserts/
.....css/
.....images/
..........image1.jpg
..........image2.jpg
..........image3.jpg
..........image4.jpg
node_modules/
partials/
.....about.html
.....home.html
.....photos.html
.....content.html
.....header.html
.....photos-list.html
.....photo-detail.html
.....photos-detail-comment.html
app.js
index.html
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'}, { name:'User2', comment:'Very good'} ]}, { id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.jpg', comments:[ { name: 'user2', comment: 'Nice'}, { name:'User1', comment:'Very good'} ]}, { id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.jpg', comments:[ {name: 'user1', comment: 'Nice'} ]}, { id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.jpg', comments:[ {name: 'user1', comment: 'Nice'}, { name:'User2', comment:'Very good'}, { name:'User3', comment:'So so'} ]} ]; //给子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', function($scope,$state){ }]);
以上，通过$scope.$$childTail.ctrPhotoList在父state中的controller中拿到子state中的controller；通过$scope.$parent.ctrPhoto在子state中的controller中拿到父state中的controller。
photos-list.html
<h1>photos-list</h1> <div ng-init="ctrPhotoList.init()"> <div ng-if="ctrPhotoList.reading"> <i></i> </div> <div ng-repeat="photo in ctrPhotoList.photos"> <div> <div> <a ui-sref="content.photos.detail"> <img src="https://www.jb51.net/asserts/images/{{photo.imageName}}" alt=""> </a> </div> <div> <h4>{{photo.title}}</h4> {{photo.description}} </div> </div> </div> </div>
state间如何传路由参数
在content.photos.detail这个state设置接收一个路由参数。
.state('content.photos.detail',{ url: '/detail/:id', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs: 'ctrPhotoDetail' })
photos-list.html 送出一个路由参数
<h1>photos-list</h1> <div ng-init="ctrPhotoList.init()"> <div ng-if="ctrPhotoList.reading"> <i></i> </div> <div ng-repeat="photo in ctrPhotoList.photos"> <div> <div> <a ui-sref="content.photos.detail({id:photo.id})"> <img src="https://www.jb51.net/asserts/images/{{photo.imageName}}" alt=""> </a> </div> <div> <h4>{{photo.title}}</h4> {{photo.description}} </div> </div> </div> </div>
以上，通过<a ui-sref="content.photos.detail({id:photo.id})">把路由参数送出。
controller.js PhotoDetailController控制器通过$stateParams获取路由参数
... //别名：ctrPhotoDetail photosGallery.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]; } } ]);
photos-detail.html 从以上的PhotoDetailController中获取数据。
<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">Comments</button> </div> </div> <div ui-view></div>
state间如何传字符串参数
在路由中这样设置：