angularjs 显示注入器错误，即使提到了所有依赖项

Question

我是新来的angular。我正在编写一个简单的 angular 应用程序。我已经为该模块和工厂创建了一个模块和一个控制器。我将依赖项添加到控制器，但是出现注入器错误。我只是不明白我哪里错了。

这是我的 angular 代码：

var app = angular.module("bookApp",[]);
app.config(['$interpolateProvider',function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
}]);;app.controller("mainController",["$scope", "$http", "titles",function($scope, $http, titles){
    $scope.titles = [{}];
    titles.getTitles();
}]);
app.factory("titles",["$scope","$http",function($scope, $http){
    var getTitles = function(){
        $http.get("http://localhost:8000/getTitles")
        .then(function(response) {
            $scope.titles = response.data;
        });
    }

    var addTitle = function(){
        var data = $.param({
            json: JSON.stringify({
                title: $scope.book.bookname
            })
        });
        $http.post("http://localhost:8000/addTitle",data).success(function(response, status){
            $scope.titles = response.data;
        });
    }
    return{
        getTitles: getTitles
    }

}]);

我的html:

<body ng-app="bookApp">
    <div class="container">
        <div>
            <table id="recordTable" ng-controller="mainController">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="title in titles">
                        <td>{[{title.id}]}</td>
                        <td>{[{title.bookname}]}</td>
                    </tr>   
                </tbody>
            </table>
        </div>

    </div>
</body>

我收到以下错误：

http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20titles

我不明白这里的问题。 "titles" 服务在那里，但它仍然给出注入器错误。

Answer 1

基本上你已经在工厂内注入了 $scope，而这在工厂内是不可注入的。您必须从工厂依赖项数组中删除 $scope 依赖项工厂代码。

If you look at the definition of factory/service, they are sigletone object which are applicable throughout the application to provide common functionality between different components of angular application.

你应该像下面那样彻底从工厂中删除范围，我在工厂中所做的主要更改是返回 $http.get 方法的承诺对象。

工厂

app.factory("titles",["$http",function($http){
    var getTitles = function(){
        return $http.get("http://localhost:8000/getTitles")
        .then(function(response) {
            return response.data;
        });
    }

    var addTitle = function(book){
        var data = $.param({
            json: JSON.stringify({
                title: book.bookname
            })
        });
        return $http.post("http://localhost:8000/addTitle",data).success(function(response, status){
            return response.data;
        });
    }
    return{
        getTitles: getTitles,
        addTitle: addTitle
    }

}]);

控制器

app.controller("mainController",["$scope", "$http","titles",
   function($scope, $http, titles){
     //$scope.titles = [{}];
     titles.getTitles().then(function(data){
        $scope.titles = data;
     });
   }
]);

angularjs 显示注入器错误，即使提到了所有依赖项

angularjs shows injector error even though all dependencies are mentioned

javascript

angularjs

angularjs-factory