打破角

Question

冰我有一個觀點：

<div id="productList" ng-controller="ProductController"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th></th> 
        <th width="100%">Item ID</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="item in productItems"> 
        <td><input type="checkbox" /></td> 
        <td><% item.ID %></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

我有一個控制器：

var TestApp = angular.module('TestApp', [], function($interpolateProvider) { 
    $interpolateProvider.startSymbol('<%'); 
    $interpolateProvider.endSymbol('%>'); 
}); 

TestApp.controller('ProductController', function ($scope) { 
    ProductRepository.GetPaginatedProducts(); 
    $scope.productItems = ProductRepository.Model; 
}); 

我有一個模型：

var ProductRepository = function() 
{ 
    return { 
     Model: null, 

     GetPaginatedProducts: function() 
     { 
      $.ajax({ 
       "url": Test.URL + "/json/products/paginated", 
       "dataType": "json", 
       "method": "post", 
       "success": function(data) 
       { 
        ProductRepository.Model = data; 
       } 
      }); 
     }, 

    } 
} 

當AJAX完成後，它更新我想讓角控制器scope.productItems工作的ProductRepository.Model數據變量。

這是我第一次使用的角度，我想我已經錯過了點，

爲什麼表中沒有與信息更新？

Answer 1

請在這裏看到樣品Ajax調用http://plnkr.co/edit/5CiC8MWiwo010nwu32he?p=preview

var TestApp = angular.module('plunker', []); 
 

 
TestApp.factory('ProductRepository', function($http, $q) { 
 
    var Model = []; 
 
    return { 
 
    Model: Model, 
 
    GetPaginatedProducts: function() { 
 
     var deferred = $q.defer(); 
 
     $http.get('paginated.json').then(
 
     //sucess 
 
     function(result) { 
 

 
      deferred.resolve(result.data) 
 

 
     } 
 
     //error 
 
     , function() {}); 
 

 
     return deferred.promise; 
 
    } 
 
    }; 
 
}) 
 

 

 
TestApp.controller('ProductController', function($scope, ProductRepository) { 
 
    $scope.productItems = []; 
 

 

 
    ProductRepository.GetPaginatedProducts().then(function(data) { 
 
     //success 
 
     $scope.productItems = data; 
 

 
    }, 
 
    //error 
 
    function() { 
 

 
     alert("can't get data"); 
 

 

 
    }) 
 

 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="plunker"> 
 
    <div id="productList" ng-controller="ProductController"> 
 

 
    <table class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th width="100%">Item ID</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in productItems"> 
 
      <td> 
 
      <input type="checkbox" /> 
 
      </td> 
 
      <td>{{item.ID}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

由於@tymeJV在評論中聲明，您應該使用$ http或$ resource（或restangular）來執行數據訪問。如果您正在更新Angular框架之外的值，則無法知道數據已更改。通過使用諸如$ http或$ resource之類的東西，Angular知道什麼時候發生了可以改變值並自動檢查更新的事件。或者，您可以手動發出$ apply（）手動處理摘要更新（確保在您更改Angular之外的值時Angular會經歷一個摘要循環）。查看https://docs.angularjs.org/api/ng/type/$rootScope.Scope上的$ apply（）文檔。

但是，您最好的選擇是首先使用Angular方法，並避免使用jQuery。