「未知的提供程序錯誤」

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