Не удалось сохранить данные из $ http.get() - AngularJS 1.3.13

Задав этот вопрос после того, как вы не сделали другого ответа, я нашел здесь работу.

Я пытаюсь сделать очень простое соединение Client/Server.

На моем сервере (Django) У меня есть представление, которое возвращает 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 Developer Tools, и останова функции успеха, я вижу, что данные прибыли и внешний вид ОК.

enter image description here

источник

2015-02-22 gioravered

Я думаю, что вам не хватает 'вар Vm = это;' –

затем() принимает функцию обратного вызова, вы не может передать ему утверждение. $ http.get ("photos /"), затем (function (response) {}); –

@MohammadSepahvand '$ scope.success' является функцией (она хранится в этой переменной прямо над использованием), поэтому я сомневаюсь, что это проблема. –

Лучшая практика показывает явное объявление зависимостей, чтобы заставить его работать с минификация так, чтобы очистить, Я хотел бы сделать:

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 и определить var vm = $scope для AngularJS < = 1,1

источник

2015-02-22 11:03:40

Спасибо за ответ, я опробовал ваш код, но все равно он не работал.Я добавил фотографию из инструментов Chrome Developer, может быть, это пролить свет на проблему. – gioravered

Похоже, что это больше не проблема AngularJS, а Django. Я начну проверять, спасибо за вашу помощь. – gioravered

Итак, вопрос был о шаблонах Django и о том, что он делится с «{» с помощью AngularJS. исправление должно было использовать тег {% verbatim%} Django перед {{photo.photo_path}} – gioravered

У вас не хватает var vm = this;. Таким образом, вы добавляете значения в vm и используете контроллер в качестве синтаксиса, что означает, что вы связываете материал с this (или vm после var vm = this). Вы смешиваете $scope и vm. Вам необходимо указать returnvm.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); 
});

источник

2015-02-22 10:22:25

Не удалось сохранить данные из $ http.get() - AngularJS 1.3.13

ответ

Смежные вопросы