Angularjs中UI Router全攻略(4)

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间如何传字符串参数

在路由中这样设置:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwzzg.html