重新加载 ng-repeat 数据失败，我做错了什么？

Question

我喜欢在处理一些数据后重新加载ng-repeat 元素，但它失败了。我想知道我做错了什么。

所以我从“iframe.php”加载一些数据然后将数据插入到jquery的不可见div标签中以将数据（html格式）映射为json格式并将json数据保存到一个名为tableObject 的变量。然后我将使用scope.$apply(scope.showCards) 将数据推送到我的$scope.cards。

这是我的代码：

var app = angular.module('rabbit', ['ngMaterial', 'ngMessages', 'ngMdIcons']),
    apiURL = 'iframe.php',
    tableObject = [];

$.ajax({
  url: "iframe.php",
  crossDomain: true,
  dataType: "html",
  success: function(data) {
    var json = data.substring(data.indexOf('<tr class = "pfrow2">') - 21);
    json = json.substring(0,json.indexOf('<td style="margin-top: 20px" colspan="2">'));
    json = json.substring(0,json.lastIndexOf('</td>') + 5);
    function widthChange() {
      if (json.indexOf('&width=130') != -1) {
        json = json.replace('&width=130','&width=300');
        widthChange();
      } else {
        // console.log(json);
        $('#json').html(json);
        var headers = ["name","kind","type","age","size","thumb","link"];
        tableObject = $("#json tr").map(function(i){
          var row = {};
          $(this).find('td').each(function(i){
            var rowName = headers[i];
            row[rowName] = $(this).text().trim();
          });
          $(this).find('td.legacy img').each(function(){
            var rowName = headers[5];
            row[rowName] = $(this).attr('src');
          });
          $(this).find('td.legacy a').each(function(){
            var rowName = headers[6];
            row[rowName] = $(this).attr('href');
          });
          return row;
        }).get();
        console.table(tableObject);
        $('#json').html('');
        var scope = angular.element($('#content')).scope();
        scope.$apply(scope.showCards);
      }
    }
    widthChange();
  },
  error: function() {
    console.log('error');
  },
});

app.controller('cardCtrl', function ($scope, $log, $mdDialog) {
  var showCards = function() {
    $scope.cards.push(tableObject);
  };
  $scope.cards = tableObject;
});

这是 HTML 中的 ng-repeat 元素：

  <div id="content" layout-sm="col" layout="row" layout-wrap ng-controller="cardCtrl">
    <md-card ng-repeat="card in cards" class="noselect" md-ink-ripple>
      <img src="{{card.thumb}}" alt="{{card.name}}">
      <h2>{{card.name}}</h2>
      <p>{{card.type}}</p>
      <p>{{card.age}}</p>
      <p>{{card.size}}</p>
      <a href="{{card.link}}"></a>
    </md-card>
  </div>

Answer 1

很难看出到底出了什么问题，但我猜tableObject 被重新分配给不同的数组实例：控制器总是绑定你全局声明的空数组（这很邪恶）。

您可以做几件事。最简单的是将 jquery 语句重构为控制器可以调用的工厂方法。

app.factory('myAjaxThingy', function($q) {
  return function() {

      // Create a defer to async promise the consumer a result
      var defer = $q.defer();

      $.ajax({ 
        /* ... */
          success: function(data) {

            // Construct the array here

            var tableObject;

            /* ... */
            /* all that parsing magic goes here */
            /* ... */            

            // Resolve the promise
            // Note: no whacky angular.element().scope() and no scope.aplly()
            defer.resolve(tableObject);
          }
      });

      // Return the promise object
      return defer.promise;
  };
});

app.controller('MyController', function(myAjaxThingy) {

  myAjaxThingy().then(function(result) {
    $scope.cards = result;
  });

});

这样，您甚至可以在需要时重新执行调用。另请注意，angular 有一个相当不错的$http 服务，可以与$.ajax 做同样的事情。