“未知的提供程序错误”

Question

我跟着角文档创建我的服务，看到一个错误信息

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注入到服务功能中的原因，因为服务设计为可重用组件。在你的情况下，你应该摆脱$范围。重构代码是这样的：

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> 

Answer 2

服务没有$scope，您可以访问$rootScope如果需要的话，但看起来你只想返回一个包含你想使用的所有函数的对象。

angularApp.factory('$users', function($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; 

}); 

Answer 3

你可能会摆脱$scope它不会去那里：P。

$scope是与控制器结合使用的值。

我建议让您的服务是这样的：

angularApp.factory('$users', function($http) { 
    var userService = {activeUser:{name:'anonymous'}}; 
    return angular.extend(userService, 
     { 
      getUser: function(id){ 
       return $http.get('/user/'+id).then(function(response){ 
          userService.activeUser = response.data; 
          return userService.activeUser; 
         }); 
      }, 
      changePassword: function(data,se,e){ 
       return $http.post(...) 
      } 
     } 
    ); 
}); 

Answer 4

有写服务两种方式。

A）使用.factory

B）使用.service

如果服务使用$resource，然后在模块内，需要导入ngResource，下载并相应地添加了angular-resource.js。

要使用ngResource，

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

为A）

angularApp.factory('$users', function($resource, $http) { 
    // 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; 

}); 

为B）

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

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

}); 

我选择B.减线来写。

Answer 5

如角文档状态：$injector:unpr（未知提供商）

试图注入范围对象为任何，这不是一个控制器或指令，例如一个服务，将抛出一个未知的提供： $ scopeProvider < - $范围错误。 如果错误地注册一个控制器作为服务

angular.module('myModule', []) 
.service('MyController', ['$scope', function($scope) { 
    // This controller throws an unknown provider error because 
    // a scope object cannot be injected into a service. 
}]);