Angularjs 服务在两个控制器之间不工作，未定义

我正在使用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

中获取数据，但当我使用

console.log（dataService.getData（'result'））获取数据时在EMP控制器中，我得到
未定义

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'));
    })
  }
}])

EMP控制器
为：-

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());
  }
])

  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;
    }];
  });

服务类别
employeeService
为：-

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());
  }
])

  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>


输入id:
显示
emp-list.htm是：-
员工数据
身份证件
名称
工号
薪水
{{oemp.eid}
{{oemp.name}
{{oemp.empno}
{{oemp.sal}}
$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，所以，如果您仍然像前面所说的那样在服务中存储$PROMITE，您可以这样做

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

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

根据建议的第一个更改，您不需要触碰emp控制器，只需触碰ng repeat指令emp-list.html即可：

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



使用factory recipe和$resource重构http调用。
$resource

这比编写提供者更简单、更快。
$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，所以，如果您仍然像前面所说的那样在服务中存储$PROMITE，您可以这样做

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

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

根据建议的第一个更改，您不需要触碰emp控制器，只需触碰ng repeat指令emp-list.html即可：

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



使用factory recipe和$resource重构http调用。
$resource

这比编写提供程序更简单、更快。
据我所知，您正在尝试将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调用。好处是，当您返回承诺时，您永远不会遇到返回未定义的
的情况

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

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（apidendpoint）
从缓存中清除详细信息
 据我所知，您正在尝试将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调用。好处是，当您返回承诺时，您永远不会遇到返回未定义的
的情况

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

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（apidendpoint）
从缓存中清除详细信息
 setData是否返回某些内容？no setData正在设置数据，它不返回任何内容，但数据不包含任何内容？只是想说明一下，我正在设置数据值dataService.setData（result，'result'）；