Angularjs 在角砌体不工作的情况下重新加载

Angularjs 在角砌体不工作的情况下重新加载,angularjs,masonry,Angularjs,Masonry,我有一个小的照片应用程序的建设,以更好地了解角度,但努力让Masoronal重新加载自己时,一个标签被打开。我正在使用 到目前为止,我有一堵照片墙,一面是我/用户的照片,另一面是用户朋友的照片。没什么太壮观的 一切都很好,除了当我点击第二个标签的朋友照片墙,砖石不是重新加载 这表示您只需要添加属性:reload on show,当调用ng show时,该属性将重新加载容器 但它不想打球。。取而代之的是,他们所有的网站都在彼此之上。就我所知,我正在正确地应用ng show 控制器 photoA

我有一个小的照片应用程序的建设,以更好地了解角度,但努力让Masoronal重新加载自己时,一个标签被打开。我正在使用

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

一切都很好,除了当我点击第二个标签的朋友照片墙,砖石不是重新加载

这表示您只需要添加属性: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>

好的。。经过长时间的盯着看,我决定在点击标签时重置每面墙的$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;
                });
            }
        }

    }]);