Question

我在确定如何更新AngularJS中的视图时遇到了一些麻烦 - 几周前就开始学习它了，所以请放心吧。这就是我要做的事情：我有一个照片网格，这些照片都是作为工厂的资源加载的。

services.js

appName.factory('Photo', ['$resource',
    function($resource){
        return $resource('http://localhost:3000/json', {}, {
            query: { method:'GET', isArray:true }
        });
    }
]);

够容易。所以现在我想启用上传新照片。我正在使用$http对象创建一个AJAX调用，然后尝试更新网格成功。

controllers.js

appName.controller('photogrid', ['$scope', 'Photo',
    function($scope, Photo) {
        $scope.photos = Photo.query();
        console.log($scope.photos);
    }
])

appName.controller('uploadFile', ['$scope', '$http', 'Photo',
    function($scope, $http, Photo) {

        $scope.uploadFile = function(form) {

            var data = new FormData();
            data.append('title', form.title.value);
            data.append('description', form.description.value);
            data.append('location', form.location.value);
            data.append('uploadfile', form.fileupload.files[0]);

            $http({
                method: 'POST',
                url: '/new',
                data: data,
                headers: {'Content-Type': undefined}, 
                transformRequest: angular.identity
            })
            .success(function(data, status, headers, config) {
                form.reset();
                $('#collapseOne').collapse('hide');
                console.log($scope.photos);
                $scope.photos = Photo.query();
                $scope.$apply();
            });

        };
    }
])

view.html

<ul id="photoGrid">
    <li ng-repeat="photo in photos">
        <img ng-src="{{ photo.src }}">
    </li>
</ul>

我尝试构建Photo模型的新实例并使用push()方法（$scope.photos.push(newPhoto)），但这不起作用。如果我这样做，我似乎可以将另一个资源添加到Photo，但它仍然不会在视图上更新。我不确定我错过了什么 - 这可能很简单。

更新查看AngularJS

0 个答案: