Представление не обновляется после ответа $ http.get ()

Question

Представление не обновляется после ответа $ http.get ()

0

Я просто следил за учебником, в котором фабрика делает запрос $ http.get() и возвращает данные, которые влияют на переменную переменной $ контроллера ($ scope.classifieds, которая должна отображаться в цикле ng-repeat) и представление не обновляется при изменении переменной (запись в журнал показывает, что данные успешно возвращены)

Код вида:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!!!</title>
    <link rel="stylesheet" type="text/css" href="node_modules/angular-material/angular-material.min.css">
    <link rel="stylesheet" type="text/css" href="node_modules/mdi/css/materialdesignicons.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">    
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">

<hello-world></hello-world>

  <md-toolbar>
    <div class="md-toolbar-tools">
      <p><strong>ngClassifieds</strong></p>
      <md-button>
        <md-icon class="mdi mdi-plus-circle"></md-icon>
            New Classifieds
      </md-button>
    </div>
  </md-toolbar>

  <md-content class="md-padding" layout="row" layout-wrap>
    <md-card ng-repeat="class in classifieds" flex="30">
    <img ng-src="{{ class.img }}"></img>
        <md-card-content>
        <div class="classified-info" ng-show="!showContact">
            <h2 class="md-title">{{ class.title}}</h2>
            <h3>{{ class.price  | currency }}</h3>
        <h4>{{ class.pdate  | date : "MMMM d, y"}}</h4>
            <p>{{ class.desc }}</p>
        </div>

      <div class="classified-contact" ng-show="showContact">
          <p><md-icon class="mdi mdi-account"></md-icon>  {{class.contact.name}}</p>
          <p><md-icon class="mdi mdi-phone"> </md-icon> {{class.contact.phone}}</p>
          <p><md-icon class="mdi mdi-email"> </md-icon> {{class.contact.email}}</p>      
      </div>

      <div layout="row">
        <md-button ng-click="showContact = true">Contact</md-button>
        <md-button ng-click="showContact = false">Details</md-button>
      </div>        

        </md-card-content>
    <md-card>
  <md-content>    

<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="components/classifieds.ctrl.js"></script>
<script type="text/javascript" src="components/classifieds.fac.js"></script>

</body>
</html>

контроллер:

(function(){    
    "use strict";    
    angular.module("ngClassifieds")
        .controller("classifiedsCtrl", ["$scope", "$http", "classifiedsFactory", function($scope, $http, classifiedsFactory){    
            $scope.message = "'with this dynamic text'";                    
            $scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){             
                return classified.data;             
            });    
            console.log('----->>> $scope.classifieds : ' + JSON.stringify($scope.classifieds));         
    }] );
})();

и завод:

(function(){
    "use strict";    
    angular.module("ngClassifieds").factory("classifiedsFactory", function($http){    
        function getClassifieds() {
            return $http.get('data/classifieds.json');
        }    
        return {
            getClassifieds : getClassifieds 
        } 
    });
})();

Я видел много похожих вопросов, но не нашел ответа на эту проблему.

Bardelman 23 апр. 2016, в 10:54

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Satpal · Accepted Answer · 2016-04-23T07-26-00.000Z

$http.get() является асинхронным, вы должны назначить значение в методе обратного вызова успеха.

использование

classifiedsFactory.getClassifieds().then(function(classified){             
    $scope.classifieds =  classified.data;             
});

Вместо

$scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){             
    return classified.data;             
});

Это решение сработало, но мне интересно, почему мой метод не сработал, так как в обоих случаях переменная области видимости менялась.
classifiedsFactory.getClassifieds() возвращает данные, которые вы promise заполнить позже
Теперь я думаю, что в функции then () должен быть указан $ scope.apply (), поэтому в нем должно быть затронуто значение $ scope.classifieds.
@Bardelman, да, ваше понимание верно, then() автоматически добавляет элементы области видимости для следующего цикла дайджеста