Question

我创建了一个 Service ，使用Web API控制器方法从数据库中提取数据。但每当我注入服务并在控制器中调用服务方法时，它都会显示以下错误：

错误：[$ injector：unpr]未知提供者：$ scopeProvider＆lt; - $ scope＆lt; - productService http://errors.angularjs.org/1.5.8/ $注射器/ unpr？P0 = copeProvider％20％3 C-％20％24scope％20％3 C-％20productService

尝试了很多，却无法理解错误究竟在哪里！

以下是我的AngularJS模块代码：

var app = angular.module("Demo", ["ngRoute"])

这是我的RouteConfig

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/products/details/:id",
        {
            templateUrl: "Temaplates/details.html",
            controller: "productDetailsController"
        })
 })

以下是我的服务：

app.factory('productService',
    function($scope, $http, $routeParams) {
        return {
            getDataById: function() {
                alert("Hello I am invoked");
                $http({
                        method: "GET",
                        url: "http://localhost:43618/api/Products",
                        params: { id: $routeParams.id }
                    })
                    .then(function(response) {
                        $scope.product = response.data;
                    })
            }
        };
    });

这是我的AngularJS控制器

app.controller("productDetailsController", function ($scope, $http, $routeParams, $location, productService) {
     $scope.message = "Product Details";
     $scope.product = productService.getDataById();

    })

实际上错在哪里!!任何帮助请!!

Answer 1

我想记下几件事

您无法在服务中注入$scope
您应该从服务方法返回$http.get promise以获取控制器内的数据。
内部控制器使用.then从服务功能中检索数据。

<强>工厂

app.factory('productService',
  function($http, $routeParams) {
    return {
      getDataById: function() {
            //return proimise from here
        return $http.get("http://localhost:43618/api/Products", {
            params: { id: $routeParams.id }
        });
      }
    };
});

<强>控制器

app.controller("productDetailsController", function($scope, $http, $routeParams, $location, productService) {
    $scope.message = "Product Details";
    productService.getDataById().then(function(response){
      $scope.product = response.data;
    }, function(error){
      console.log("Error occured ", error);
    });
});

Answer 2

您不能将$ scope注入服务，因为特定的范围仅在指令和组件中可用。您只能使用$ rootScope

这实际上是有道理的，因为服务是单身人士。当注入多个控制器时，哪个$ scope应该角度使用呢？另一方面，$ rootScope也是一个单例，因此有效。

AngularJS：错误：[$ injector：unpr]未知提供者：$ scopeProvider＆lt; - $ scope＆lt; - productService

2 个答案: