Получение ошибки "Uncaught ReferenceError: updateClock не определено" в приложении AngularJS

71
8

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 секунду.

Uncaught ReferenceError: updateClock не определен

Я определил updateClock до того, как setInterval вызывается до сих пор, почему я получаю это сообщение?

спросил(а) 2015-09-22T10:34:00+03:00 5 лет, 1 месяц назад
1
Решение
57

Потому что ваша функция 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);
...
});

ответил(а) 2015-09-22T12:00:00+03:00 5 лет, 1 месяц назад
59

Я думаю, что лучший способ достичь того, чего вы хотите достичь, заключается в следующем:

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

ответил(а) 2015-09-22T11:32:00+03:00 5 лет, 1 месяц назад
58

Пожалуйста измените

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

в


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

иметь updateClock в рамках функции интервалов. С помощью этого ключевого слова вы назначаете функцию свойству функции контроллера, однако она не делает updateClock доступной как переменную.

ответил(а) 2015-09-22T10:40:00+03:00 5 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема