AngularJS - 为什么“错误：ng：areq Bad Argument”？答案

【问题标题】：AngularJS - why "Error: ng:areq Bad Argument"?AngularJS - 为什么“错误：ng：areq Bad Argument”？
【发布时间】：2016-03-11 00:43:45
【问题描述】：

我正在尝试关注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>

【问题讨论】：

我喜欢你的第一次介绍 - 他妈的真实故事......并且没有定义控制器
该示例使用了非常旧的 Angular 版本。您最好阅读当前文档，因为不再允许使用这种声明控制器的方式。
天哪，Angular 的那个版本是 2012 年的 - 你不是在开玩笑说它已经过时了......

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

【解决方案1】：

你需要这样定义一个角度控制器：

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

});

原因是：

您可以想象，“angular”只是一个代表您的应用程序的 javascript 对象 - 因此，如果您希望您的应用程序知道您的控制器，您必须添加它（就像我发布的那样）。

【讨论】：

【解决方案2】：

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

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);
                 }
             });
         };
    });

【讨论】：

【解决方案3】：

首先，{{selected}} $scope 变量尚未定义。

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

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

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

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

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

【讨论】：

【解决方案4】：

控制器应声明如下：

var app = angular.module("app", ["ngRoute", ...]);    

app.controller("DefaultCtrl", ["$scope", ..., function($scope){
      $scope.names = ["john"];
}]);

【讨论】：