搜尋

首頁  >  問答  >  主體

angular.js - 很簡單的一個angularjs入門級demo,但是報錯了。

本人初學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>
PHP中文网PHP中文网2813 天前518

全部回覆(2)我來回復

  • 迷茫

    迷茫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

    回覆
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新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>
    

    回覆
    0
  • 取消回覆