0

我真的很难弄清楚如何在 AngularJS 中更新视图 - 几周前才开始学习它，所以请放轻松。这就是我想要做的事情：我有一张照片网格，它们都被加载为工厂的资源。

服务.js

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

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

控制器.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();
            });

        };
    }
])

视图.html

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

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

4

0 回答 0