logo标签列表

Angular.js控制器无法正常工作。

javascripthtmlangularjsangularjs-controllerangularjs-module
5

我是Angular的新手，正在学习来自Angular网站的Angular介绍视频。我的代码无法工作，而且我不知道为什么会这样。我收到了以下错误信息：

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

这是我的代码。
<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        function MainController($scope) {
            $scope.message = "Controller Example";
        }
    </script>
</body>
</html>

我做错了什么？
5个回答
4

自Angular 1.3版本以后，全局控制器函数声明被禁用。

你需要采用模块化方法才能使其正常工作。

你应该先定义angular.module，然后将angular组件包含在其中。

演示

angular.module('app', [])
    .controller('MainController', function ($scope) {
        $scope.message = "Controller Example";
    })

然后将 ng-app 更改为使用该模块 ng-app="app"

有道理。我相信《Angular入门视频》是针对1.3版本的。这些视频应该真正得到更新。 - Halcyon
2

仅仅定义函数并不会成为控制器。你需要像这样使用：

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
    $scope.message = "Controller Example";
}

请确保在您的HTML中像这样使用myApp：

<html lang="en" ng-app="myApp">
哇，我们甚至选择了相同的变量名。 - CollinD
@DavidL，你在说哪个参数？ - Bhojendra Rauniyar
@BhojendraNepal 你应该先添加控制器名称...然后第二个参数是函数。 - Pankaj Parkar
@BhojendraNepal 请看一下。演示 - Tushar
@Tushar 我不理解。 - Bhojendra Rauniyar
1
function MainController($scope) {
  $scope.message = "Controller Example";
}

应该是更像这样的东西。
var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
  $scope.message = "Controller Example";
}

然后在你的html中包含一个ng-app="myApp"指令。

1
<!DOCTYPE html>
<html lang="en" ng-app="app">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular Demo</title>
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

   <script>

    var app = angular.module("app",[])
    .controller('mainController', function($scope) {
      var vm = this;  
      vm.message = "Controller Example";
    })

    </script>
  </head>

  <body ng-controller="mainController as vm">
    <div >
      <p>{{vm.message}}</p>
    </div>
  </body>

</html>
0

这不是你应该创建控制器的方式...

首先，你应该在 JavaScript 中创建模块和控制器。

// start angular module (app) definition
angular.module('myApp',[''])
 .controller('MainController', function($scope) {
 $scope.message = "Controller Example";
 });

现在在你的HTML中

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>

现在它将开始工作

我建议您先浏览一些教程

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

https://docs.angularjs.org/tutorial

这些是一些很好的教程

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接