Angular.js控制器不起作用
[英]Angular.js Controller Not Working
问题描述
I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. 
我是Angular的新手，我正在浏览Angular网站的Angular视频简介。 My code isn't working and I have no idea why not. 我的代码不起作用，我不知道为什么不行。 I get the error 我收到了错误
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
Here's my code. 这是我的代码。
<!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>
What am I doing wrong? 我究竟做错了什么？
5 个解决方案
解决方案1
4 已采纳 2015-09-10 04:26:40
After angular version 1.3 global controller function declaration is disabled
You need to use modularise approach in order to make it work. 您需要使用模块化方法才能使其正常工作。
You should define angular.module first and then include angular components to it 您应首先定义angular.module，然后包含角度组件
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.message = "Controller Example";
})
Then change ng-app to use that module ng-app="app" 然后更改ng-app以使用该模块ng-app="app"
解决方案2
2 2015-09-10 04:26:47
Just defining the function will not be a controller. 仅定义该功能将不是控制器。 You need to use like this: 你需要像这样使用：
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
$scope.message = "Controller Example";
}
And ensure to use myApp in your html like this: 并确保在您的HTML中使用myApp，如下所示：
<html lang="en" ng-app="myApp">
解决方案3
1 2015-09-10 04:27:33
function MainController($scope) {
$scope.message = "Controller Example";
}
should be something more like 应该是更像的东西
var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.message = "Controller Example";
}
And then include an ng-app="myApp" directive in your html. 然后在你的html中包含一个ng-app="myApp"指令。
解决方案4
1 2015-09-10 05:02:59
<!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>
解决方案5
0 2015-09-10 04:32:53
This is not how you should create a controller... 这不是你应该如何创建一个控制器......
First you should create the module and controller in java script 首先，您应该在java脚本中创建模块和控制器
// start angular module (app) definition
angular.module('myApp',[''])
.controller('MainController', function($scope) {
$scope.message = "Controller Example";
});
Now in your HTML 现在在你的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>
Now it will start working 现在它将开始工作
I suggest you to go through some tutorials first 我建议你先学习一些教程
http://campus.codeschool.com/courses/shaping-up-with-angular-js/ http://campus.codeschool.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/tutorial https://docs.angularjs.org/tutorial
These are some good tutorials 这些是一些很好的教程
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.