Question

我从一本书＆＃34; ng-book＆＃34;中复制了这个angularjs代码。但它根本不起作用........................................... ...............

<!DOCTYPE html>
<html ng-app="">
<head>
    <title>Simple App</title>

</head>
<body>
    <div ng-controller="MyController">
        Hello <span ng-bind="clock"></span>
    </div>
    <script src="angular-1.5.7/angular.js">
    </script>
    <script type="text/javascript">
        function MyController($scope){
            $scope.clock = new Date();
            var updateClock = function () {
                $scope.clock = new Date();
            };
            setInterval(function() {
                $scope.$apply(updateClock);
            }, 1000);
            updateClock();
        };

    </script>

</body>
</html>

Answer 1

使用$ interval而不是setInterval。
当你使用angular的$ interval
您需要定义ng-app
控制器定义应该与代码段

这是一个有效的代码段

var demoApp = angular.module('demoApp', []);
demoApp.controller('MyController', function($interval, $scope) {
  $scope.clock = new Date();
  var updateClock = function() {
    $scope.clock = new Date();
  };
  $interval(function() {
    updateClock();
  }, 1000);
  updateClock();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Simple App</title>

</head>

<body ng-app="demoApp">
  <div ng-controller="MyController">
    Hello <span ng-bind="clock"></span>
  </div>
</body>

Answer 2

您所做的并不是最有效的方式。例如，您可以使用$ interval等等..

但是由于你是just starting with Angular，我已经使代码工作时添加或修改很少，所以你可以理解：

＆＃13;

//addition-start
var app = angular.module('myApp', []);
app.controller("MyController", MyController);
//addition-end
function MyController($scope) {
  $scope.clock = new Date();
  var updateClock = function() {
    $scope.clock = new Date();
  };
  setInterval(function() {
    $scope.$apply(updateClock);
  }, 1000);
  updateClock();
};

＆＃13;

<!DOCTYPE html>
<!--can be modified to ng-app="myApp"but will work otherwise too -->
<html ng-app="">

<head>
  <title>Simple App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js "></script>
</head>

<body>
  <div ng-controller="MyController">
    Hello <span ng-bind="clock "></span>
  </div>
</body>

</html>

＆＃13;

Answer 3

首先阅读如何定义角度模块及其工作原理。你没有在html中定义模块

<!DOCTYPE html>
    <html ng-app="testapp">
    <head>
        <title>Simple App</title>
    <script src="angular-1.5.7/angular.js"> </script>
    </head>
    <body>
     <script type="text/javascript">
     var app=angular.module('testapp',[]);
            app.controller('MyController',function($scope,$setInterval){
                $scope.clock = new Date();
                var updateClock = function () {
                    $scope.clock = new Date();
                };
                $setInterval(function() {
                    $scope.$apply(updateClock);
                }, 1000);
                updateClock();

          });

        </script>
        <div ng-controller="MyController">
            Hello <span ng-bind="clock"></span>
        </div>

    </body>
    </html>

Answer 4

您忘了定义模块ng-app

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Simple App</title>
</head>
<body>
    <div ng-controller="MyController">
        Hello {{clock}}</span>
    </div>

    <script src="angular-1.5.7/angular.js"></script>
    <script type="text/javascript">
            var app = angular.module('demoApp',[]);
            function MyController($scope){
                $scope.clock = new Date();
                var updateClock = function () {
                    $scope.clock = new Date();
                };
                $interval(function() {
                    updateClock();
                }, 1000);
                updateClock();
            };

    </script>

</body>
</html>

文档

Difference between set-interval and $interval

ng-bind 具有单向数据绑定（$ scope - ＆gt; view）。它有一个快捷方式{{ val }}，它显示插入到html中的范围值$ scope.val，其中val是一个变量名。

Angular JS代码不起作用

4 个答案: