$ http請求中的數據未更新到ng-repeat中

我有一個服務在控制器和控制器之間共享數據以處理我的應用程序中的$ http請求。我使用ng-repeat列表來顯示數據，並且目前在服務上有硬編碼的JSON數據。我打算修改硬編碼的方法來使用$ http.post從服務器獲取數據，並且我得到了數據，但是我的列表沒有更新。我嘗試添加$超時但仍然沒有運氣。

這裏是我的代碼：

app.service("Storage", function ($rootScope, $http, $q) { 
     var predicate = 'name'; 
     var reverse = false; 

     var content = this; 
     content.items = []; 
     content.filteredItems = []; 
     return { 
      requestData: function() { 
       var deferred = $q.defer(); 

       var data = $.param({ 
        json: JSON.stringify({ 
         req_type: 'type_1', 
         reg_name: 'name_2' 
        }) 
       }); 

       $http.post("http://yourdomain/json.php", data) 
       .success(function(data, status) { 
        deferred.resolve(data); 
       }) 
       .error(function(data) { 
        deferred.reject(data); 
       }); 

       return deferred.promise; 
      }, 
      setContent : function(data){ 
       content.items = data; 
      }, 
      getContentItems : function() { 
       return content.items; 
      } 
     } 
    });

控制器：

app.controller('MainController', function($scope, $window, $filter, $timeout, $http, Storage) { 
     $scope.predicate = null; 
     $scope.reverse = null; 
     this.items = null; 

     Storage.requestData().then(function(data) { 
      Storage.setContent(data); 
      $timeout(function(){ 
       $scope.predicate = Storage.getPredicate(); 
       $scope.reverse = Storage.getReverse(); 
       this.items = Storage.getContentItems(); 
      }); 
      //$scope.$apply(); 
      console.log('After11 : ' + JSON.stringify(Storage.getContentItems())); 
     }); 
    });

來源

2015-07-19 Andy

你在這一行做出錯誤：

this.items = Storage.getContentItems();

這===控制器的這種

！我總是創建mv變量在控制器的頂部，並使用mv而不是this來避免此錯誤。

angular 
 
    .module('app', []) 
 
    .service('Storage', function($http, $q, $timeout) { 
 
    var content = this; 
 
    var items = []; 
 

 
    this.requestData = function() { 
 
     var deferred = $q.defer(); 
 

 
     //TODO Some http request 
 

 
     $timeout(function() { 
 
     deferred.resolve(['A', 'B', 'C']); 
 
     }, 1000); 
 

 
     return deferred.promise; 
 
    }; 
 

 
    this.setContent = function(data) { 
 
     items = data; 
 
    }; 
 

 
    this.getContentItems = function() { 
 
     return items; 
 
    }; 
 
    }) 
 
    .controller('MainCtrl', function(Storage) { 
 
     var mv = this; 
 

 
     mv.items = []; 
 

 
     Storage.requestData().then(function(data) { 
 
      Storage.setContent(data); 
 
      mv.items = Storage.getContentItems(); 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body ng-app="app"> 
 
    <ul ng-controller="MainCtrl as mv"> 
 
    <li ng-repeat="item in mv.items" ng-bind="item"></li> 
 
    </ul> 
 
</body> 
 
</html>

來源

2015-07-19 12:08:58

哦，我掙扎超過3小時只爲這個錯誤。非常感謝您指出這一點。順便提一下，您能提供有關此解決方案的任何鏈接/信息嗎？ – Andy

您需要的所有信息都是Angular文檔 – 2015-07-19 12:53:10

$ http請求中的數據未更新到ng-repeat中

回答

相關問題