本人初學angularjs,在看一本書的《angularjs 權威教程》,第二章有個demo,如下。
這裡使用angular版本1.2.29,如果換成1.3.1 會報錯。
請問,這是如何造成的呢?應該怎麼樣調試這個錯誤呢?
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Simple App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.29/angular.min.js"></script>
</head>
<body>
<p ng-controller="MyController">
<h1>Hello {{clock}}</h1>
</p>
<script type="text/javascript">
function MyController($scope, $timeout) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</body>
</html>
迷茫2017-05-15 16:58:52
1.3版本後不在window物件上尋找controllers了 $controller will no longer look for controllers on window.
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-31
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p ng-controller="MyController">
<h1>Hello {{clock}}</h1>
</p>
<script type="text/javascript">
(function(){
angular.module("app", []).controller("MyController", MyController);
MyController.$inject = ['$scope', '$timeout'];
function MyController($scope, $timeout) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
}
})();
</script>
</body>
</html>
The JS Bin
http://jsbin.com/vekixa/edit?html,console,output
如果無法翻牆,請換牆內的CDN
曾经蜡笔没有小新2017-05-15 16:58:52
建議樓主跟進到 1.4 版本(版本真的很重要)
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Simple App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
</head>
<body>
<p ng-controller="MyController">
<h1>Hello {{clock}}</h1>
</p>
<script type="text/javascript">
function MyController($scope, $timeout) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
updateClock();
}, 1000);
};
</script>
</body>
</html>
像這樣就可以了。 。當然也可以寫
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Simple App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
</head>
<body>
<p ng-controller="MyController">
<h1>Hello {{updateClock()}}</h1>
</p>
<script type="text/javascript">
function MyController($scope, $timeout) {
$scope.updateClock = function() {
return new Date();
};
setInterval(function() {
updateClock();
}, 1000);
};
</script>
</body>
</html>