在 Angular 中重新加载数据答案

【问题标题】：Reload Data in Angular在 Angular 中重新加载数据
【发布时间】：2017-05-30 23:20:42
【问题描述】：

我尝试重新加载数据按钮。这是我的json：

    [
        {
            "name": "AAAAAA",
            "data": "False"

        },

        {
            "name": "BBBBBB",
            "data": "45%"
        },
        {
            "name": "CCCCC",
            "data": "12%"
        }
]

我的javascript：

app.service('service', function($http, $q) {

  var deferred = $q.defer();

  $http.get('names.json').then(function(data) {
    deferred.resolve(data);
  });

  this.getNames = function() {
    return deferred.promise;
  }
});

app.controller('FirstCtrl', function($scope, service, $http) {
  var vm = this;
  vm.reloadData = function() {
    console.log("reloading");
    vm.loadData();
  };

  vm.loadData = function() {
    var promise = service.getNames();
    promise.then(function(data) {
      $scope.names = data.data;
      console.log($scope.names);
    });
  }

  vm.loadData();
});

我的 HTML：

    <div ng-controller="FirstCtrl as vm">
      <table>
        <tbody>
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.data}}</td>
          </tr>
        </tbody>
      </table>
      <button ng-click="vm.reloadData()">Reload</button>
    </div>

点击函数“vm.reloadData()”后我的数据应该重新加载，但没有任何反应，我的数据没有刷新。感谢您提前回答。

【问题讨论】：

标签： javascript angularjs refresh

【解决方案1】：

试试这个：

我已经删除了你的额外承诺，因为 $http 本身 return a promise..

添加了不将请求数据保存在缓存中的规定

   app.service('service', function($http, $q) {
      this.getNames = function() {
         return $http.get('names.json', { cache: false});
      }
    });

    app.controller('FirstCtrl', function($scope, service) {
      var vm = this;
      vm.reloadData = function() {
        console.log("reloading");
        vm.loadData();
      };

      vm.loadData = function() {
        var promise = service.getNames();
        promise.then(function(data) {
          $scope.names = data.data;
          console.log($scope.names);
        });
      }

      vm.loadData();
    });

【讨论】：

【解决方案2】：

将您的 service 代码更改为类似

this.getNames = function() {
   return $http.get('names.json');
}

【讨论】：

【解决方案3】：

根据您的实施，您正在坚持服务中的承诺，这已经解决了。

您应该在getNames() 服务方法中定义deferred。

app.service('service', function ($http, $q) {
    this.getNames = function () {
        var deferred = $q.defer();
        $http.get('names.json').then(function (data) {
            deferred.resolve(data);
        });
        return deferred.promise;
    }
});

【讨论】：