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

Question

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

错误：[$injector:unpr]未知的提供程序：$scopeProvider < - $scope < - productService http://errors.angularjs.org/1.5.8/$injector/unpr?p0=copeProvider%20%3C-%20%24scope%20%3C-%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();

    })

实际上出了什么问题！！请帮忙！！

- TanvirArjel

---

$routeProvider.when("/products/details/:id", 不是 $routeProvider..when("/products/details/:id", - Parth Raval

哈哈！其实这不是问题！！这只是打字错误 :) - TanvirArjel

"/products/details/"+id - Parth Raval

Answer 1

我想要指出几件事情：

1. 你不能在服务中注入 $scope
2. 你应该从服务方法返回 $http.get 的承诺，以便在控制器中获取数据。
3. 在控制器内使用 .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);
    });
});

- Pankaj Parkar

---

@TanvirArjel 谢谢，很高兴知道这件事 :) - Pankaj Parkar

@Pankaj_Parkar，它显示产品未定义！错误！！ - TanvirArjel

@TanvirArjel，多了一个括号，请检查已更新的内容。 - Pankaj Parkar

终于成功了！感谢你的努力。请问你能告诉我那个多余的括号到底在哪里吗？ - TanvirArjel

您可以在此处检查差异：http://stackoverflow.com/posts/40691588/revisions - Pankaj Parkar

Answer 2

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

这其实是有道理的，因为服务是单例的。当注入到多个控制器中时，AngularJS 应该使用哪个 $scope 呢？另一方面，$rootScope 也是单例的，所以可以使用它。

- Robba

---

谢谢！如果您能根据输出重写/更改我的代码并提交作为答案，那就太好了！ - TanvirArjel

我想翻译，但是我在使用手机。我想给你一个答案让你可以继续进行。 - Robba