錯誤：[$ injector：unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20

我是Angularjs中的一名新成員，並開發了一個帶有後端支持的簡單計算器應用程序。由於我分隔控制器控制器+服務 - 有如下錯誤：

Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/ $injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20calcService

因此，誰能揭示哪裏我錯了？

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Insert title here</title> 
     <link rel="stylesheet" type="text/css" href="bootstrap-3.0.3-dist/css/bootstrap.min.css" /> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script> 
     <script src="angular/angular.min.js"></script> 
     <script type="text/javascript" src="angular/angular-ui-router.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 
     <script type="text/javascript" src="js/services/calcService.js"></script> 
     <script type="text/javascript" src="js/controllers/calcCtrl.js"></script> 

     <script type="text/javascript" src="js/controllers/resultsCtrl.js"></script> 
    </head> 
    <body> 
     <div class="container" ng-app="app"> 
      <header ng-include="'templates/nav.html'"></header> 
      <div ui-view></div> 
      <footer ng-include="'templates/footer.html'"></footer> 
     </div>  
    </body> 
</html>

app.js

angular 
    .module('app', [ 
    'ui.router' 
    ]) 
    .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('calc', { 
     url: '/', 
     templateUrl: '../templates/calc.html', 
     controller: 'calcCtrl' 
     }) 
     .state('results', { 
     url: '/results', 
     templateUrl: '../templates/results.html', 
     controller: 'resultsCtrl' 
     }) 
    }]);

calcCtrl.js：

angular 
    .module('app') 
    //.controller('calcCtrl', ['$scope', '$http', function($scope, $http) { 
    .controller('calcCtrl', ['$scope', 'calcService', function($scope, calcService) { 
    $scope.title = "Calculator"; 
    $scope.items = ['calc','results']; 
    $scope.selectedValue = 'calc'; 
    }]);

calcService.js：

//angular.module('app', []); 
angular.module('app') 
.factory('calcService', ['$scope', '$http', function($scope, $http) { 

    $scope.calculate = function() { 
     // use $.param jQuery function to serialize data from JSON 
     var data = $.param({ 
      left: $scope.left, 
      right: $scope.right, 
      operation: $scope.operation 
     }); 

     var config = { 
      headers : { 
       'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
      } 
     } 

     $http.post('/calc/calculate', data, config) 
     .success(function (data, status) { 
      $scope.responseData = "Result is : " + data; 
     }) 
     .error(function (data, status) { 
      $scope.responseData = "Data: " + data + 
       "<hr />status: " + status; 
     }); 
    }; 
} ]);

文件結構：https://gyazo.com/5d571f2a92757a4c20239cb67d8b0d5c

以下是我目前有在Firebug的錯誤：https://gyazo.com/4e367b3644b0f106938f272e2980f074 如果我取消1號線在calcService.js - 這裏是一個結果（完全隱藏UI）：https://gyazo.com/fb6714f5d131ab31ae0ca17509b19968

來源

2016-04-03 stryker

您不能將$scope注入工廠 - 它如何知道注入的範圍？如果您需要使用示波器數據，則將其作爲工廠方法的參數從控制器傳遞。此外，您的服務應該返回您在控制器中處理的承諾。

廠：

angular.module('app') 
.factory('calcService', ['$http', function($http) { 
    var service = {}; 
    service.calculate = function(left, right, operation) { 
     // use $.param jQuery function to serialize data from JSON 
     var data = $.param({ 
      left: left, 
      right: right, 
      operation: operation 
     }); 

     var config = { 
      headers : { 
       'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
      } 
     } 

     return $http.post('/calc/calculate', data, config); 
    }; 
    return service; 
}]);

在你的控制器：

angular.module('app') 
    .controller('calcCtrl', ['$scope', 'calcService', function($scope, calcService) { 
     $scope.title = "Calculator"; 
     $scope.items = ['calc','results']; 
     $scope.selectedValue = 'calc'; 
     $scope.calculate = function(){ 
      calcService.calculate($scope.left, $scope.right, $scope.operation).then(
       function(response) { 
        $scope.responseData = "Data: " + response.data; 
       }, 
       function(error) { 
        // examine the error properties and do whatever 
       } 
      ); 
     }; 
    }]);

來源

2016-04-04 00:15:36 Lex

感謝@Lex，它的工作原理。 – stryker

錯誤：[$ injector：unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20

回答

相關問題