Question

我正在使用AngularJS显示员工记录。我使用两个视图来显示数据，我使用两个视图emp-box.htm及其各自的控制器（empController），并在此控制器中employeeBoxController我从服务中获取数据，我想要结果在employeeBoxController中获取以在empController中使用并在视图中显示（emp-list.htm），我创建了一个服务eService

app.service('dataService',function() {

  var s = {};

  this.setData = function(data,key) {
    s[key]=data;
  },
  this.getData = function(key) {
    return s[key];
  }
  this.hello = function() {
    return 'hello';
  }
})

用于在employeeBoxController中获取结果和设置数据并进入empController但是当我在empController中使用console.log(dataService.getData('result'));获取数据时，我得到undefined

employeeBoxController是

app.controller("employeeBoxController", ['$scope', 'employeeService', 
  'dataService', function($scope, employeeService, dataService) {
  $scope.getEmployeeDetails = function(eid) {
    $scope.isLoading = false;
    employeeService.getDetails($scope.eid).then(function(result) {
      dataService.setData(result, 'result');
      $scope.isLoading = true;
      console.log(dataService.getData('result'));
    })
  }
}])

empController是： -

app.controller("empController", ['$scope', 'employeeService', 'dataService', 
  function($scope, employeeService, dataService) {

    $scope.result = dataService.getData('result');
    //console.log(dataService.hello());

    console.log(dataService.getData('result'));

    console.log(dataService.hello());
  }
])

服务类employeeService是： -

  app.config(["employeeServiceProvider",function(employeeServiceProvider){
      employeeServiceProvider.config('http://localhost:8080/pos');
  }]);

  app.provider("employeeService",function(){
    var myurl='';

    this.config=function(eurl){
      myurl=eurl;
    }

    this.$get=['$http','$log',function($http,$log){
      var employeeobj={};
      employeeobj.getDetails=function(eid){
        return $http.get(myurl+'/getEmployees/'+eid);
    }

  return employeeobj;
    }];
  });

emp-box.htm是： -

    <div>
  Enter the id: <input type="text" ng-model="eid"/>
  <button ng-click="getEmployeeDetails()">show</button>
   </div>
   emp-list.htm is:-
       <div class="panel panel-primary">
       <div class="panel-body" style="text-align:center; margin:0 auto">
      <h3>Employee Data</h3>
      </div>
     </div>
      <div class="panel panel-primary">
        <div class="panel-body">
      <!--  <div ng-show="!isLoading" style="color:red">
      <span class="glyphicon glyphicon-time"></span>Loading...
      </div>-->
     <table class="table table-hover">
     <thead>
      <tr>
      <th>ID</th>
      <th>Name</th>
      <th>empno</th>
      <th>salary</th>
      </tr>
    </thead>
     <tbody>
      <tr ng-repeat="oemp in result.data">

      <td>{{oemp.eid}}</td>
      <td>{{oemp.name}}</td>
      <td>{{oemp.empno}}</td>
      <td>{{oemp.sal}}</td>
    </tr>
  </tbody>

    </table>
  </div>
  </div>

Answer 1

根据我的理解，您尝试将API结果缓存到其他服务中，因此您无需再在另一个控制器中调用API。此外，首先执行empController，当您执行dataService.getData('result')时，尚未收到设置它的API响应，而后者又从另一个服务调用。我建议你将这两个服务结合起来，这样就可以缓存API调用本身而不是缓存服务中的确切值，如果缓存不包含你的数据，则进行API调用并缓存它。

这是我要做的事情，比如说CacheAPIService。

app.factory('CacheAPIService', ['$http', function($http) {
  var cache = {};
  return {
    get: function(api) {
     if(angular.isUndefined(cache[api])) {
       cache[api] =  $http.get(api); //storing in cache while making API call
     }
     return cache[api]; //Return from cache
    },
    clear: function(api) {
        delete cache[api];
    }
  }
}]);

因此，每当您需要将缓存设置为API调用时，除了进行API调用之外，还要使用此服务，它还会缓存它。并且，如果它已被缓存，则不会进行新的API调用。好处是你永远不会遇到它返回undefined的情况，因为你正在回归承诺。

在第一个控制器中，更新的代码变为：

app.controller("employeeBoxController", ['$scope', 'CacheAPIService', function($scope, CacheAPIService) {
  $scope.getEmployeeDetails = function(eid) {
    $scope.isLoading = true;
    var endpoint = 'api/endpoint/'+$scope.eid;    //Replace with your API endpoint
    CacheAPIService.get(endpoint).then(function(result) {
      $scope.isLoading = false;
      console.log(dataService.getData('result'));
    })
  }
}]);

此处，进行第一次API调用并进行缓存。看看你的其他控制器：

app.controller("empController", ['$scope', 'CacheAPIService', function($scope, CacheAPIService) {
  CacheAPIService.get(endpoint).then(function(data) {
    var endpoint = 'api/endpoint/'+$scope.eid; //your API endpoint
    console.log('data =', data);
  });

}]);

在这里，您仍然使用相同的服务，但它将被缓存，如果没有缓存，它将进行API调用并缓存该承诺。在这里，我直接使用API端点作为存储在缓存中的密钥。这样，您不必每次都提供唯一键，因为端点本身是唯一的。

请注意，如果要删除缓存数据，在进行POST或PUT调用时，可以调用CacheAPIService.clear(apiEndpoint)清除缓存中的详细信息。

Answer 2

$ http.get将返回一个承诺。要正确地将数据设置为dataService：

 employeeService.getDetails($scope.eid).then(function(result) {
      dataService.setData(result.data, 'result'); // note .data
      $scope.isLoading = true;
      console.log(dataService.getData('result'));
    })

在“缓存”服务中存储承诺不是最好的选择。

我希望getEmployeeDetails（）函数将路由到empController，所以如果你仍然按照你的说法在你的服务中存储$ promise，你可以这样做。

    dataService.getData('result').then(function(result){
        $scope.result = result.data;
  });

当$ scope.result设置为$ scope时，ng-repeat将开始迭代。

建议进行第一次更改后，您只需要触摸empController，而只需触摸ng-repeat指令emp-list.html：

<tr ng-repeat="oemp in result">

使用factory recipe和$ resource重构http调用。 https://docs.angularjs.org/api/ngResource/service/ $资源

这比编写提供者更容易，更快捷。

服务无法在两个控制器之间工作未定义

2 个答案: