(AngularJS)ng:areq Bad Argument:Argument' fn'不是一个函数,得到了对象?

时间:2017-01-19 07:34:35

标签: javascript angularjs angularjs-directive

我学习角度。在过去的几个小时里,即使请求似乎成功,我的页面仍然没有显示任何内容。

有问题的组件:

// Register `eventsQc` component, along with its associated controller and template
angular.
module("eventsQc").
component("listeEvenements", {
    templateUrl: "appli/liste-events/template-liste-evenements.html",
    controller: function evenementsQuebecController($http) {
        var self = this;
        self.orderProp = 'DT01';
        $http.get("/appli/data/evenements-source.json").then(function(reponse) {
            for (i = 0; i < reponse.data.evenements.evenement.length; i++) {
                self.evenements = reponse.data.evenements.evenement[i];
            }
        });
    }
});

用于显示输出的html

<ul>
    <li ng-repeat="evenement in $ctrl.evenements">
        <div>ID- {{evenement.MUNID}}</div>
    </li>
</ul>

最后是index.html页面的代码。您将看到已创建组件。

<!doctype html>
<html lang="en" ng-app="eventsQc">

<head>
    <meta charset="utf-8">
    <title>Quoi faire à Québec</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>

    <liste-evenements></liste-evenements>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="appli/app.js"></script>
<script src="appli/liste-events/liste-events-component.js"></script>
</body>

</html>

我检查了所有内容,但即使ng-inspector显示$ http调用的结果,页面上也没有显示任何内容。我只是不断得到同样的信息:

1 个答案:

答案 0 :(得分:1)

示例组件

 var app = angular.module('eventsQc');

    app.component(
                'listeEvenements',
                {
                    templateUrl : 'appli/liste-events/template-liste-evenements.html',
                    controller : function ($http,$scope) {
                        $scope.Register = function () {
                            var req = {
                                method: 'GET',
                                url: '/appli/data/evenements-source.json',
                                data: { }
                            };

                            $http(req).then(
                                function(response){
                                    console.log(req);
                                    console.log(response);
                                $scope.evenements= response.data.data;


                                }, function (error) {
                                    console.log(error.data);
                                });
                        }

                    }
    });

html(摆脱$)

<ul>
    <li ng-repeat="evenement in evenements">
        <div>ID- {{evenement.MUNID}}</div>
    </li>
</ul>

<button ng-click="Register()">REGISTER</button>

忘记在(app.js)

中定义模块
var app = angular.module('eventsQc', []);