communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
angular.js - 很简单的一个angularjs入门级demo，但是报错了。
PHP中文网
PHP中文网 2017-05-15 16:56:52
0
2
489

本人初学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中文网

认证0级讲师

répondre à tous(2)
迷茫
迷茫2017-05-15 16:58:52 2 plancher

Après la version 1.3, les contrôleurs ne sont plus trouvés sur l'objet window $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>

Le Bin JS
http://jsbin.com/vekixa/edit?html,console,output

Si vous ne pouvez pas contourner le mur, veuillez changer le CDN à l'intérieur du mur

Comme +0
Ajouter une réponse
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-15 16:58:52 1 plancher

Il est recommandé que l'affiche fasse suite à la version 1.4 (la version est vraiment importante) 

<!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>

Juste comme ça. . Bien sûr, vous pouvez aussi écrire 

<!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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal