Question

我在构建上有一个小照片应用程序，以便更好地理解角度，但是当打开选项卡时，很难让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;
                });
            }
        }

    }]);

角度砌体无法正常重载

1 个答案: