mbc*_*ump 24 javascript angularjs
这是我的HTML和JS文件
HTML文件
<!DOCTYPE html>
<html ng-app="">
<head>
<!--Works with latest Stable Build-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!--Does not work with Latest Beta-->
<!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Angular Playground</h1>
{{message}}
<br />Total Length: {{message.length}}
</body>
</html>
JAVASCRIPT文件
var MainController = function($scope) {
$scope.message = "Hello, Michael";
};
如果我使用最新的稳定版本,那么我得到以下结果(这显然是正确的):
角度游乐场
你好,迈克尔总长:14
但是,如果我使用Beta 18,那么我会收到以下错误:
错误:[ng:areq]参数'MainController'不是函数,未定义
并返回以下页面:
Angular Playground#2
{{message}}总时长:{{message.length}}
有什么想法,可能是什么造成的？
Sir*_*att 62
使用最新版本的Angular(> 1.3.0),您无法声明全局构造函数并将其与ng-controller一起使用.
快速修复是创建角度模块并将MainController添加为控制器.
在这里,我将主控制器包装在IIFE中,以防止将函数添加为全局:
(function() {
angular
.module("appName", [])
.controller("MainController", MainController);
MainController.$inject = ["$scope"];
function MainController($scope) {
$scope.message = "Hello, Michael";
};
})();
在HTML中,您需要将角度模块的名称添加到ng-app指令:
<!DOCTYPE html>
<html ng-app="appName">
<head>
<!--Works with latest Stable Build-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!--Does not work with Latest Beta-->
<!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Angular Playground</h1>
{{message}}
<br />Total Length: {{message.length}}
</body>
</html>