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相同。

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

1 个答案: