angular 砌体无法正常工作

Question

为了更好地理解 angular，我在构建中安装了一个小照片应用程序，但在打开选项卡时很难让 masonary 重新加载自身。我正在使用 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;
                });
            }
        }

    }]);

angular 砌体无法正常工作

reload-on-show with angular masonry not working

angularjs

masonry