Question

index.html is:

<html ng-app="clock"> 

<head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>

<body>

    <h1 ng-controller="ClockController">{{clockTime}}</h1>


</body>
</html>

And app.js is:

var app = new angular.module('clock',[]);
(function(){

    app.controller('ClockController',function($scope){
        this.updateClock = function(){
            $scope.clockTime = new Date();
        };

        setInterval(function(){
            $scope.$apply(updateClock);
        },1000);
        this.updateClock();
    });

})();

当我访问index.html时，我会在1秒后继续听到错误。

未捕获的ReferenceError：未定义updateClock

我在调用updateClock之前定义了setInterval仍为何收到此消息？

Answer 1

请更改

this.updateClock = function(){
            $scope.clockTime = new Date();
        };

到

var updateClock = function(){
            $scope.clockTime = new Date();
        };

在区间函数范围内可以使用 updateClock 。使用此关键字，您可以将函数分配给控制器函数的属性，但它不能将 updateClock 作为变量提供。

Answer 2

我认为实现目标的最佳方法是：

angular.module('clock', [])
.controller('ClockController',function ($scope, $interval) {
    $scope.clockTime = new Date();

    var id = $interval(function () {
        $scope.clockTime = new Date();
    }, 1000);

    $scope.$on('$destroy', function () {
        $interval.cancel(id);
    });
});

请勿忘记清除$destroy活动

的时间间隔

Answer 3

因为您的函数updateClock是在对象this上定义的。当您在间隔内调用它时，JS引擎无法为您找到函数定义。改为：

app.controller('ClockController',function($scope) {
    function updateClock () {
        $scope.clockTime = new Date();
    };

    setInterval(function () {
        $scope.$apply(updateClock);
    }, 1000);

    updateClock();
});

顺便说一句，请使用服务$interval代替setInterval。这样，您无需明确调用$apply：

app.controller('ClockController', function($scope, $interval) {
    ...
    $interval(function() {
        updateClock();
    }, 1000);
    ...
});

获取＆＃34;未捕获的ReferenceError：未定义updateClock＆＃34; AngularJS app

3 个答案: