Angular app中的"未知提供程序错误"

Question

我按照Angular文档创建了我的服务并看到了一条错误消息

http://docs.angularjs.org/error/$injector:unpr?p0=$scopeProvider%20%3C-%20$scope%20%3C-%20$users

这是我的代码:

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.service('$users', function($scope, $http, $cookie, $window) {
  // need to instantiate the service
  var newUsersServiceInstance;

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  $scope.user // = User.get({userId:123});

  $scope.getUser = function(id, s) {
    $scope.user = User.get({"userId": id}, s, e);
  }

  $scope.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

我不知道我哪里出错了.

考虑到每个人的答案后,我的新代码.同样的错误.

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.service('$users', function($http, $cookie, $window) {
  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  this.user // = User.get({userId:123});

  this.getUser = function(id, s) {
    this.user = User.get({"userId": id}, s, e);
  }

  this.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

 return this;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

即使在更改使用工厂后,我也会看到相同的错误.

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.factory('$users', function($resource, $http, $cookie, $window) {
  // need to instantiate the service
  var newUsersServiceInstance = {};

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  newUsersServiceInstance.user // = User.get({userId:123});

  newUsersServiceInstance.getUser = function(id, s) {
    newUsersServiceInstance.user = User.get({"userId": id}, s, e);
  }

  newUsersServiceInstance.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

Answer 1

使用时.service,传入的函数将作为构造函数调用.你不应该返回一个实例,尝试这样的事情:

angularApp.service('$users', function() {

  this.field1 = "something";

  this.method1 = function(){
  }
  //more fields

});

只有在使用.factory方法时才返回实例.我不明白为什么你需要将$ scope注入服务函数,因为服务被设计成一个可重用的组件.在你的情况下,你应该摆脱$ scope.像这样重构代码:

angularApp.factory('$users', function($resource, $http, $cookie, $window) {//Declare $resource dependency
  // need to instantiate the service
  var newUsersServiceInstance;

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  newUsersServiceInstance.user; // = User.get({userId:123});

  newUsersServiceInstance.getUser = function(id, s) {
    newUsersServiceInstance.user = User.get({"userId": id}, s, e);
  }

  newUsersServiceInstance.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

如果需要将它们注入工厂函数,还必须使用ngResource,ngCookies声明依赖关系.

var angularApp = angular.module("myApp", ['ngResource','ngCookies']);

别忘了添加:

 <script src="angular-resource.js"></script>
 <script src="angular-cookies.js"></script>

如果您使用CDN,则可以添加:

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">       </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-cookies.js">       </script>