重新加载重复数据失败，我做错了什么

Reloading ng-repeat data failed, what did I do wrong?

本文关键字：什么 错了 失败 新加载 加载 数据      更新时间：2023-09-26

我喜欢在处理一些数据后重新加载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>

很难看出到底出了什么问题，但我猜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相同的事情。

相关文章：