Heim > Fragen und Antworten > Hauptteil

angular.js - 数据绑定问题，怎样达到每过一秒更新clock.now数据的目的，显示的一直是clock.now。这是敲书上的代码，问题出在哪？

<!doctype html>
<html ng-app>
    <head>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
        </script>
    </head>
<body>
    <p ng-controller = "MyController">
        <h1>hello {{ clock.now }}!</h1>
    </p>
    <script>
        function MyController($scope) {
            $scope.clock = {
                now: new Date()
            };
            var updateClock = function() {
                $scope.clock.now = new Date();
            };
            setInterval(function() {
                $scope.$apply(updateClock);
            }, 1000);
            updateClock();
        };
    </script>
</body>
</html>

漂亮男人2849 Tage vor575

Antworte allen(2)Ich werde antworten

曾经蜡笔没有小新2017-05-15 17:05:37

API变化了1.3以上不允许global controller(估计你的书比较老)

可以这个简单粗暴直接降低版本

<!doctype html>
<html ng-app>
<head>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.6/angular.js">
    </script>
</head>
<body>
<p ng-controller="MyController">
    <h1>hello {{ clock.now }}!</h1>
</p>
<script>
    function MyController($scope) {
        $scope.clock = {
            now: new Date()
        };
        var updateClock = function () {
            $scope.clock.now = new Date();
        };
        setInterval(function () {
            $scope.$apply(updateClock);
        }, 1000);
        updateClock();
    }
</script>
</body>
</html>

或者这个改成升级之后推荐的写法

<!doctype html>
<html ng-app="app">
<head>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js">
    </script>
</head>
<body>
<p ng-controller="MyController">
    <h1>hello {{ clock.now }}!</h1>
</p>
<script>
    angular.module('app', [])
            .controller('MyController', ['$scope', function MyController($scope) {
                $scope.clock = {
                    now: new Date()
                };
                var updateClock = function () {
                    $scope.clock.now = new Date();
                };
                setInterval(function () {
                    $scope.$apply(updateClock);
                }, 1000);
                updateClock();

            }]);

</script>
</body>
</html>

Antwort

过去多啦不再A梦2017-05-15 17:05:37

你这样代码只会执行一次，应该在每次执行update的时候自动预订下次更新才能达到每秒变化的目的。
这本书我没看过，但我估计你的大括号抄错了位置。
你这样试试？

<!doctype html>
<html ng-app>
    <head>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
        </script>
    </head>
<body>
    <p ng-controller = "MyController">
        <h1>hello {{ clock.now }}!</h1>
    </p>
    <script>
        function MyController($scope) {
            $scope.clock = {
                now: new Date()
            };
            var updateClock = function() {
                $scope.clock.now = new Date();
                setInterval(function() {
                    $scope.$apply(updateClock);
                }, 1000);
            };
            updateClock();
        };
    </script>
</body>
</html>

Antwort

StornierenAntwort