角砌体重新加载显示不起作用

Question

我在构建中有一个小照片应用程序，以更好地理解角度，但在打开选项卡时很难让砖石重新加载。我正在使用https://github.com/passy/angular-masonry

到目前为止，我有一堵照片墙，一侧是我/（用户）的照片，另一侧是用户朋友的照片。没什么太壮观的。

一切都很好，除了当我点击第二个标签（朋友照片墙）时，砌体没有重新加载。

https://github.com/passy/angular-masonry#user-content-reload-on-show 这表明您只需要添加属性： reload-on-show ，它会在调用 ng-show 时重新加载容器。

但它不想打球.. 相反，它们都在彼此之上。据我所知，我正确地应用了 ng-show。

控制器

 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>

Answer 1

好的..经过多次凝视后，我决定通过在单击选项卡时重置每面墙的 $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;
                });
            }
        }

    }]);