Question

我刚刚关注一个教程，其中工厂发出$ http.get（）请求并返回受控制器的$ scope变量影响的数据（ $ 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 
        } 
    });
})();

我见过许多相似的问题，但没有找到这个问题的答案。

Answer 1

$http.get()是异步的，您应该在成功回调方法中指定值。

使用

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

而不是

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

$ http.get（）响应后，视图不会更新

1 个答案: