Question

我是Angularjs的新手，开发了一个支持后端的简单计算器应用程序。由于我将控制器分离到控制器+服务 - 有一个错误，如：

错误：[$ 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 如果我在calcService.js中取消注释第一行 - 这是一个结果（完全隐藏的UI）：https://gyazo.com/fb6714f5d131ab31ae0ca17509b19968

Answer 1

您无法将$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
                }
            );
        };
    }]);

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

1 个答案: