AngularJS - 为什么“错误:ng:areq Bad Argument”?

时间:2016-03-10 16:31:01

标签: javascript angularjs angularjs-directive autocomplete angularjs-scope

我试图关注this example,但我得到的只是

Error: ng:areq
Bad Argument
Argument 'DefaultCtrl' is not a function, got undefined

有谁可以确切地说出原因? DefaultCtrl在那里,为什么没有看到?

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js"></script>
    <script>
        function DefaultCtrl($scope) {
            $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
        }

        angular.module('app', []).directive('autoComplete', function($timeout) {
            return function(scope, iElement, iAttrs) {
                    iElement.autocomplete({
                        source: scope[iAttrs.uiItems],
                        select: function() {
                            $timeout(function() {
                              iElement.trigger('input');
                            }, 0);
                        }
                    });
            };
        });
    </script>

</head>

<body>
    <form method=post>
    <div ng-app='app' >
        <div ng-controller='DefaultCtrl'>
            <input auto-complete ui-items="names" ng-model="selected">
            selected = {{selected}}
        </div>
    </div>
    <input type=submit>
    </form>
</body>
</html>

4 个答案:

答案 0 :(得分:0)

您需要以这种方式定义角度控制器:

angular.module("app", []).controller("DefaultCtrl", function(){
  //your stuff

});

原因是:

你可以想象,那是&#34;棱角分明的&#34;只是一个代表你的应用程序的javascript对象 - 所以如果你想让你的应用程序知道你的控制器,你必须添加它(就像我发布的那样)。

答案 1 :(得分:0)

您必须将控制器注册为模块的一部分。

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('app', [])
    .controller("DefaultCtrl", DefaultCtrl)
    .directive('autoComplete', function($timeout) {
         return function(scope, iElement, iAttrs) {
             iElement.autocomplete({
                 source: scope[iAttrs.uiItems],
                 elect: function() {
                     $timeout(function() {
                         iElement.trigger('input');
                     }, 0);
                 }
             });
         };
    });

答案 2 :(得分:0)

首先,尚未定义{{selected}} $范围变量。

其次,您的控制器尚未定义。这就是它未定义的原因。

var myApp = angular.module('myApp',[]);

myApp.controller('DefaultController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

https://docs.angularjs.org/guide/controller

第三,根据您网站的性能,将您的Javascript放在外部文件中,并在加载DOM后加载它。除非您在网站完全呈现之前需要您的Javascript。否则会阻止您的网页加载。

答案 3 :(得分:0)

控制器应声明如下:

comments/_comment.html.erb