angularjs显示了喷射器错误,即使提到了所有依赖关系

时间:2016-06-21 18:34:59

标签: javascript angularjs angularjs-factory

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

这是我的角度代码:

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

我不明白这里的问题。 “标题”服务在那里,但它仍然给出了喷射器错误。

1 个答案:

答案 0 :(得分:1)

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

  

如果你看一下工厂/服务的定义,它们就是sigletone   适用于整个申请的对象   角度的不同组件之间的共同功能   应用

您应该像下面那样彻底删除工厂范围,并且我在工厂中进行的主要更改将返回$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;
     });
   }
]);