问题描述
本人初学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>
问题解答
回答1：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 Binhttp://jsbin.com/vekixa/edit?html,console,output
如果无法翻墙，请换墙内的CDN
回答2：建议楼主跟进到 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>
