Question

我一直在尝试将一堆代码移到服务中，而不是让它放在控制器中，因为我的应用程序中的其他控制器将需要一些相同的功能。我有以下控制器代码：

JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 'HoldState', 
  function ($scope, $http, HoldState) {

      //----------------------------------------------------------
      // Load the Calendar Data whent he department changes
      //----------------------------------------------------------

      $scope.getCalendarOnDeptChange = function () {
          // Get the dropdown into e
          var e = document.getElementById("deptSelect");

          // Set $scope.department to the text of the selected dropdown item --- MUST FIND BETTER ANGULAR METHOD
          $scope.department = e.options[e.selectedIndex].text;
          console.log($scope.department);
          $scope.getCalendar();
      };


      //----------------------------------------------------------
      // Load the calendar data
      //----------------------------------------------------------

      $scope.getCalendar = function () {
          // Retrieve calendar data
          HoldState.getCalendar($scope.lastDepartment, $scope.date, $scope.lastLawType, $scope.lastLocationID).then(function (data) {
              $scope.cases = data;
              $scope.$apply();
          });

          HoldState.setDepartment($scope.department);
      };

      //----------------------------------------------------------
      // Load the user's default settings
      //----------------------------------------------------------

      $scope.loadDefaults = function () {
          HoldState.getUserDefaults($scope.UserID).then(function (data) {
              $scope.UserDefaults = data;
          });

          $scope.defaultDepartment = $scope.UserDefaults.CourtRoom;
          $scope.defaultLawType = $scope.UserDefaults.LitigationCode;
          $scope.defaultLocationID = $scope.UserDefaults.LocID;
      };

      $scope.loadPaths = function () {
          HoldState.getTypeOfLaw().then(function (data) {
              $scope.lastLawType = data;
          });

          HoldState.getCourthouse().then(function (data) {
              $scope.lastLocationID = data;
          });

          HoldState.getDepartment().then(function (data) {
              $scope.lastDepartment = data;
          });
      };


      $scope.doAuthentication = function () {
          $scope.UserID = 'dpeng';
      };

      $scope.saveSequence = function () {

      };

      //----------------------------------------------------------
      // Initial processing
      //     Located here so that all functions are defined before 
      //     being called.
      // 1. Authenticate the user
      // 2. Get the default values
      // 3. Load the paths
      // 4. Get the list of departments
      // 5. Show the calendar.
      //----------------------------------------------------------
      $scope.doAuthentication();
      $scope.loadDefaults();
      $scope.loadPaths();

      HoldState.getDepartmentList($scope.lastLawType, $scope.lastLocationID).then(function (data) {
          $scope.departments = data;
      });

      $scope.getCalendar();

  }]);

我还有以下服务代码：

var StateService = angular.module('StateService', [])
.service('HoldState', function ($http) {
    this.setTypeOfLaw = function (a) { localStorage.setItem('LawType', a) };
    this.setCourthouse = function (a) { localStorage.setItem('Building', a) };
    this.setDepartment = function (a) { localStorage.setItem('Dept', a) };
    this.getTypeOfLaw = function () {
        var LT = localStorage.getItem('LawType');
        return LT;
    };
    this.getCourthouse = function () {
        var BLDG = localStorage.getItem('Building');
        return BLDG;
    };
    this.getDepartment = function () {
        var DEPT = localStorage.getItem('Dept');
        return DEPT;
    };

    this.setStatus = function (a) { localStorage.setItem('Status', a) };

    this.getStatus = function () {
        var STATUS = localStorage.getItem('Status');
        return STATUS;
    }

    //Begin default settings
    this.getUserDefaults = function (UserID) {
        var userDefaults = [];
        $http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
            .then(function (response) {
                userDefaults = response;
                var status = this.getStatus();

                // If the status is 0 then we have not yet navigated anywhere so we will need to set the path values to be
                // the same as the default. We do nothing if status is not 0 because it means we already have path values set
                if (status == 0) {
                    this.setTypeOfLaw(response.LitigationCode);
                    this.setCourthouse(response.LocID);
                    this.setDepartment(response.CourtRoom);
                }

            }, function (response) {
                console.log(response.status + " -- " + response.data + " -- " + response.statusText);
            });


        return userDefaults;
    };

当我致电$scope.loadDefaults();时，我收到错误消息：

TypeError: HoldState.getUserDefaults(...).then is not a function
    at m.$scope.loadDefaults (http://localhost:54365/js/controllers.js:78:52)
    at new <anonymous> (http://localhost:54365/js/controllers.js:121:14)
    at Object.e [as invoke] (http://localhost:54365/js/angular.min.js:36:315)
    at x.instance (http://localhost:54365/js/angular.min.js:76:79)
    at http://localhost:54365/js/angular.min.js:59:85
    at q (http://localhost:54365/js/angular.min.js:7:428)
    at M (http://localhost:54365/js/angular.min.js:59:69)
    at g (http://localhost:54365/js/angular.min.js:51:409)
    at http://localhost:54365/js/angular.min.js:51:17
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2071:22 <div ng-view="" class="view-frame ng-scope">(anonymous function) @ angular.min.js:102
angular.min.js:102 TypeError: Cannot read property 'getStatus' of undefined
    at controllers.js:311
    at angular.min.js:112
    at m.$eval (angular.min.js:126)
    at m.$digest (angular.min.js:123)
    at m.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1955)
    at m.$apply (angular.min.js:127)
    at m.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2018)
    at l (angular.min.js:81)
    at P (angular.min.js:85)
    at XMLHttpRequest.H.onload (angular.min.js:86)(anonymous function) @ angular.min.js:102

我做错了什么？我只是试图通过我的Angular服务干净地从Web服务中获取数据。

Answer 1

getUserDefaults是唯一真正需要成为承诺的方法，因为您正在对您的api进行异步调用。因此，将$ q注入您的服务，然后让该方法返回一个承诺。

this.getUserDefaults = function (UserID) {
    var userDefaults = [], deferred = $q.defer();
    $http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
        .then(function (response) {

            var status = this.getStatus();

            // If the status is 0 then we have not yet navigated anywhere so we will need to set the path values to be
            // the same as the default. We do nothing if status is not 0 because it means we already have path values set
            if (status == 0) {
                this.setTypeOfLaw(response.LitigationCode);
                this.setCourthouse(response.LocID);
                this.setDepartment(response.CourtRoom);
            }
            d.resolve(response);
        }, function (response) {
            console.log(response.status + " -- " + response.data + " -- " + response.statusText);
        });


    return deferred.promise;
};

你也应该将吸气剂用作吸气剂，而不是试图将它们视为承诺。即

$scope.loadPaths = function () {
      $scope.lastLawType = HoldState.getTypeOfLaw();

      $scope.lastLocationID = HoldState.getCourthouse();

      $scope.lastDepartment = HoldState.getDepartment();
  };

Answer 2

再看一下错误：

HoldState.getUserDefaults(...).then is not a function
                               ^^^^

HoldState.getUserDefaults()没有回复承诺，这就是问题所在。

为了能够像你现在一样使用服务，稍微调整一下方法：

this.getUserDefaults = function (UserID) {
    return $http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
        .then(function (response) {
            var status = this.getStatus();

            // If the status is 0 then we have not yet navigated anywhere so we will need to set the path values to be
            // the same as the default. We do nothing if status is not 0 because it means we already have path values set
            if (status == 0) {
                this.setTypeOfLaw(response.LitigationCode);
                this.setCourthouse(response.LocID);
                this.setDepartment(response.CourtRoom);
            }    
        }, function (response) {
            console.log(response.status + " -- " + response.data + " -- " + response.statusText);
        });

};

由于承诺是可链接的，因此您基本上会返回$http.get()的承诺，该承诺将通过response解决。这应该可以使它发挥作用。

Answer 3

这应解决问题

  $scope.loadDefaults = function () {
      HoldState.getUserDefaults($scope.UserID).then(function (data) {
          $scope.UserDefaults = data;
      }, function(errData) {
          //$scope.UserDefaults isn't going to get filled, so do some error handling here.
      });

      $scope.defaultDepartment = $scope.UserDefaults.CourtRoom;
      $scope.defaultLawType = $scope.UserDefaults.LitigationCode;
      $scope.defaultLocationID = $scope.UserDefaults.LocID;
  };

和

//Begin default settings
this.getUserDefaults = function (UserID) {
    //Here we return the promise
    return $http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
        .then(function (response) {
            userDefaults = response;
            var status = this.getStatus();

            // If the status is 0 then we have not yet navigated anywhere so we will need to set the path values to be
            // the same as the default. We do nothing if status is not 0 because it means we already have path values set
            if (status == 0) {
                this.setTypeOfLaw(response.LitigationCode);
                this.setCourthouse(response.LocID);
                this.setDepartment(response.CourtRoom);
            }
            //Here we fill the data variable
            return response;

        }, function (response) {
            console.log(response.status + " -- " + response.data + " -- " + response.statusText);
        });

};

服务中的角度函数不被视为函数

3 个答案: