未能保留来自 $http.get() 的数据 - AngularJS 1.3.13

Question

在未能做出我在这里找到的任何其他答案后提出这个问题。

我正在尝试建立一个非常简单的客户端/服务器连接。

在我的服务器 (Django) 中，我有一个 returns 对象的 JSON 视图。在我的客户中，我有一个 $http.get() 应该检索该数据。

当我试图保留该数据时，问题就开始了。数据顺利到达客户端，但在 success() 函数结束后就消失了。

如有任何帮助，我们将不胜感激。

app.js:

angular.module('photoComments', [])

angular.module('photoComments').controller('PhotoCommentsController', function($http){

    var vm = this;
    vm.activePhoto = {};
    vm.photos = [];
    vm.setActivePhoto = setActivePhoto;

    function setActivePhoto(photo) {
       vm.activePhoto = photo;
    }

    vm.success = function(result) {
        vm.photos = result.data;
    }   

    $http.get("photos/").then(vm.success);
});

index.html

<body ng-app="photoComments" ng-controller="PhotoCommentsController as appCtrl">
    <div class="container">
        <div class="row">
            <fieldset class="list-group-item">
                <div class="col-md-2" ng-repeat="photo in appCtrl.photos">
                    <div>
                        <img ng-src="{{photo.photo_path}}" class="img-responsive" ng-click="setActivePhoto(photo)"/>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/app.js"></script>
</body>

当使用 Chrome 开发者工具进行调试并在成功函数中设置断点时，我看到数据已到达并且看起来正常。

Answer 1

你不见了var vm = this;。因此，您将值添加到 vm 并使用控制器作为语法，这意味着您将内容绑定到 this（或 var vm = this 之后的 vm）。您也在混合使用 $scope 和 vm。您还需要 return vm.photos 来解决承诺。我建议阅读此风格指南，尤其是关于数据服务的部分：https://github.com/johnpapa/angularjs-styleguide#data-services

要修复它：

angular.module('photoComments').controller('PhotoCommentsController', function($http){
 var vm = this;
 vm.activePhoto = {};
 vm.photos = [];
 vm.setActivePhoto = setActivePhoto;

 function setActivePhoto(photo) {
     vm.activePhoto = photo;
 }

 vm.success = function(result) {
     vm.photos = result.data;
     return vm.photos;
 }   

 $http.get("photos/").then(vm.success);
});

Answer 2

最佳实践建议显式声明依赖关系以使其与缩小一起工作以便清理，我会这样做：

angular.module('photoComments', [])

angular.module('photoComments').controller('PhotoCommentsController', ['$http','$scope',function($http,$scope){

    $scope.activePhoto = {};
    $scope.photos = [];
    $scope.setActivePhoto = setActivePhoto;

    function setActivePhoto(photo) {
       $scope.activePhoto = photo;
    }

    $scope.success = function(result) {
        $scope.photos = result.data;
    }   

    $http.get("photos/").then($scope.success);
});

和

<body ng-app="photoComments" ng-controller="PhotoCommentsController">
    <div class="container">
        <div class="row">
            <fieldset class="list-group-item">
                <div class="col-md-2" ng-repeat="photo in photos">
                    <div>
                        <img ng-src="{{photo.photo_path}}" class="img-responsive" ng-click="setActivePhoto(photo)"/>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/app.js"></script>
</body>

您可以继续使用 vm，但您必须在 $scope 中进行解析并为 AngularJS <= 1.1

定义 var vm = $scope

未能保留来自 $http.get() 的数据 - AngularJS 1.3.13

Fail in keeping data from $http.get() - AngularJS 1.3.13

javascript

django

http

angularjs

angularjs-ng-repeat