Angularjs 在角砌体不工作的情况下重新加载
我有一个小的照片应用程序的建设,以更好地了解角度,但努力让Masoronal重新加载自己时,一个标签被打开。我正在使用 到目前为止,我有一堵照片墙,一面是我/用户的照片,另一面是用户朋友的照片。没什么太壮观的 一切都很好,除了当我点击第二个标签的朋友照片墙,砖石不是重新加载 这表示您只需要添加属性:reload on show,当调用ng show时,该属性将重新加载容器 但它不想打球。。取而代之的是,他们所有的网站都在彼此之上。就我所知,我正在正确地应用ng show 控制器Angularjs 在角砌体不工作的情况下重新加载,angularjs,masonry,Angularjs,Masonry,我有一个小的照片应用程序的建设,以更好地了解角度,但努力让Masoronal重新加载自己时,一个标签被打开。我正在使用 到目前为止,我有一堵照片墙,一面是我/用户的照片,另一面是用户朋友的照片。没什么太壮观的 一切都很好,除了当我点击第二个标签的朋友照片墙,砖石不是重新加载 这表示您只需要添加属性:reload on show,当调用ng show时,该属性将重新加载容器 但它不想打球。。取而代之的是,他们所有的网站都在彼此之上。就我所知,我正在正确地应用ng show 控制器 photoA
photoApp.controller('PhotoWall', ['$scope', '$http', '$log',
function($scope, $http, $log) {
/* Handle my photos */
$http.get('/api/my-photos').success(function (data) {
$scope.myPhotos = data;
});
$scope.$on('handleUpdateMyWall', function(event, obj) {
$scope.myPhotos.unshift( obj );
$scope.$apply();
});
/* Handle their photos */
$http.get('/api/friends-photos').success(function (data) {
$scope.friendsPhotos = data;
});
/* Handle the tabbed interface */
$scope.showMyPhotos = true;
$scope.showFriendsPhotos = false;
$scope.show = {
friendsPhotos: function(){
$scope.showMyPhotos = false;
$scope.showFriendsPhotos = true;
},
myPhotos: function(){
$scope.showMyPhotos = true;
$scope.showFriendsPhotos = false;
}
}
}]);
html
<section ng-controller="PhotoWall" class="photoWall">
<ul id="cssmenu" class="nav-tabs">
<li ng-class="{active: showMyPhotos }">
<a href ng-click="show.myPhotos()">My Photos</a>
</li>
<li ng-class="{active: showFriendsPhotos }">
<a href ng-click="show.friendsPhotos()">Friends Photos</a>
</li>
</ul>
<div masonry reload-on-show ng-show="showMyPhotos">
<div class="photo masonry-brick" ng-repeat="photo in myPhotos">
<p class="title">{{ photo.title }}</p>
<img src="{{photo.image}}">
<p class="description">{{ photo.description }}</p>
</div>
</div>
<div masonry reload-on-show ng-show="showFriendsPhotos">
<div class="photo masonry-brick" ng-repeat="photo in friendsPhotos">
<p class="photoer">{{ photo.photoer }}</p>
<img src="{{photo.image}}">
<p class="title">{{ photo.title }}</p>
<p class="description">{{ photo.description }}</p>
</div>
</div>
</section>
好的。。经过长时间的盯着看,我决定在点击标签时重置每面墙的$scope内容,以此来代替小欺骗。。看来没问题
photoApp.controller('PhotoWall', ['$scope', '$http', '$log',
function($scope, $http, $log) {
/* Handle my photos */
$http.get('/api/my-photos').success(function (data) {
$scope.myPhotos = data;
});
$scope.$on('handleUpdateMyWall', function(event, obj) {
$scope.myPhotos.unshift( obj );
$scope.$apply();
});
/* Handle their photos */
$http.get('/api/friends-photos').success(function (data) {
$scope.friendsPhotos = data;
});
/* Handle the tabbed interface */
$scope.showMyPhotos = true;
$scope.showFriendsPhotos = false;
$scope.show = {
friendsPhotos: function(){
$scope.showMyPhotos = false;
$scope.showFriendsPhotos = true;
var tmp = $scope.friendsPhotos;
$scope.friendsPhotos = [];
$timeout(function(){
$scope.friendsPhotos = tmp;
});
},
myPhotos: function(){
$scope.showMyPhotos = true;
$scope.showFriendsPhotos = false;
var tmp = $scope.myPhotos;
$scope.myPhotos = [];
$timeout(function(){
$scope.myPhotos = tmp;
});
}
}
}]);