<h1>photos-detail-comment</h1> <div ng-init="ctrPhotoComment.init()"> <div ng-repeat="comment in ctrPhotoComment.comments"> <div> <div> <a href=""> <img src="https://www.jb51.net/assets/images/{{comment.imageName}}" alt=""> </a> </div> <div> <h4>{{comment.name}}</h4> {{comment.comment}} </div> </div> </div> </div>
state间如何传递对象
通过data属性，把一个对象赋值给它。
.state('content',{ url: 'https://www.jb51.net/', abstract: true, data:{ user: "user", password: "1234" }, views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{templateUrl: 'partials/header.html'}, } })
给header.html加上一个对应的控制器，并提供注销方法。
$stateProvider .state('content',{ url: 'https://www.jb51.net/', abstract: true, data:{ user: "user", password: "1234" }, views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{ templateUrl: 'partials/header.html', controller: function($scope, $rootScope, $state){ $scope.logoff = function(){ $rootScope.user = null; } } } } })
添加一个有关登录页的state
.state('content.login',{ url:'login', data:{ loginError: 'User or password incorrect.' }, views:{ "body@content" :{ templateUrl: 'partials/login.html', controller: function($scope, $rootScope, $state){ $scope.login = function(user, password, valid){ if(!valid){ return; } if($state.current.data.user === user && $state.current.data.password === password){ $rootScope.user = { name: $state.current.data.user } // Or Inherited /*$rootScope.user = { name: $state.$current.parent.data.user };*/ $state.go('content.home'); }else{ $scope.message = $state.current.data.loginError; } } } } } })
添加login.html文件，现在的文件结构为：
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
.....login.html
app.js
index.html
login.html
<form ng-submit="login(user, password, form.$valid)"> <div> <div> <h3>Indentification</h3> </div> <div> <input type="text" ng-model="user" placeholder="User ..." required> <span ng-show="form.user.$error.required && form.user.$dirty">Enter the user</span> <hr> <input type="password" ng-model="password" placeholder="Password ..." required> <span ng-show="form.password.$error.required && form.password.$dirty">Enter the password</span> </div> <div> <button type="submit">Login</button> <button type="reset">Reset</button> <span>{{message}}</span> </div> </div> </form>
header.html 修改如下
<nav> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span></span> <span></span> <span></span> </button> <a ui-sref="content.home">Home</a> </div> <div> <ul> <li> <a ui-sref="content.photos.list">Photos</a> </li> <li> <a ui-sref="content.about">About</a> </li> </ul> <ul> <li ng-if="user.name"> <a role="button" aria-expanded="false" href="#" data-toggle="dropdown">{{user.name}} <span></span></a> <ul role="menu"> <li><a ui-sref="content.home" ng-click="logoff()">Sing out</a></li> </ul> </li> <li ng-if="!user.name"> <a ui-sref="content.login">Sing In</a> </li> </ul> </div> </div> </nav>
onEnter和onExit事件
.state('content.photos.detail',{ url: '/detail/:id', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs: 'ctrPhotoDetail', 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)); } })
在PhotoDetailController中：