Question

我对angular1.5非常了解，我的问题是从Meteor.call()返回的数据未显示在HTML

这是我的代码：

hubs.js

class HubsController {
  data = [];

  constructor($scope, $uibModal) {
    $scope.viewModel(this);

    this.$scope = $scope;
    this.$uibModal = $uibModal;

    this.initViews();

    this.subscribe('admin.verifiedBusinesses');
    this.subscribe('admin.verifiedStars');
    this.getData();
    console.log('data', this.data);
  }

  ...

  getData() {
    Meteor.call('warehouse.getAll', (err, data) => {
      if (err) {
        console.log(err);
      }
      // Initialize active routes.
      this.data = data;
      console.log(this.data); // data works fine
      return data;
    });
  }
}

angular
  .module('material-lite')
  .controller('hubsDataController', ['$scope', '$uibModal', HubsController]);

数据在这里无效：

hubs.html

<div class="table-responsive" style="overflow-x: hidden" ng-controller="hubsDataController">
  ...
            <tr ng-repeat="hubsData in data" class="table_row">
              <td>{{ hubsData.name }}</td>
              <td>

我希望html中的输出与从HubsController函数返回的getData类中的输出相同

Answer 1

一种方法是从基于回调的API创建AngularJS承诺：

getData() {
    const deferred = this.$q.defer();
    Meteor.call('warehouse.getAll', (err, data) => {
      if (err) {
        console.log(err);
        deferred.reject(err);
        return;
      }
      // Initialize active routes.
      this.data = data;
      console.log(this.data); // data works fine
      deferred.resolve(data);        
    });
    return deferred.promise;
}

当AngularJS承诺解决时，AngularJS框架会自动调用$apply。这将数据带入AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

Answer 2

我解决了。我缺少用于绑定数据的$apply()方法。

  getData() {
    Meteor.call('warehouse.getAll', (err, data) => {
      if (err) {
        console.log(err); // TODO
        swal('Error', err.reason, 'error');
        return;
      }
      // Initialize active routes.
      this.$scope.$apply(() => {
        this.$scope.data = data;
      });
    });
  }

如何等待流星调用的数据？

2 个答案: