У меня очень простая конструкция ng-if, использующая две кнопки MD и одну переменную области видимости AngularJS isPlaying
, Однако ng-if, похоже, не работает вместе с переменной. Я вижу, как переменная меняется, когда я нажимаю кнопки, используя консольные инструменты, но никаких изменений в DOM нет. Как ни странно, ng-if срабатывает при наведении курсора на другие компоненты Angular, такие как кнопки в главном меню.
HTML / MD / PHP:
<md-button class="md-icon-button" ng-if="!isPlaying" ng-click="play()" aria-label="Play">
<md-icon md-svg-src="<?php echo get_stylesheet_directory_uri(); ?>/img/icon/ic_play_arrow_black_24px.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" ng-if="isPlaying" ng-click="pause()" aria-label="Pause">
<md-icon md-svg-src="<?php echo get_stylesheet_directory_uri(); ?>/img/icon/ic_pause_black_24px.svg"></md-icon>
</md-button>
JS:
$scope.play = function () {
player.playVideo();
$scope.isPlaying = true;
}
$scope.pause = function () {
player.pauseVideo();
$scope.isPlaying = false;
}
Проблема была вызвана функцией, заключенной в блок тайм-аута. Я заменил setTimeout
с $timeout
и все заработало нормально
$scope.isPlaying = false;
$scope.videoTime = 0;
function onPlayerStateChange() {
console.log(player);
if (player.getPlayerState() === 1)
$scope.isPlaying = true;
else
$scope.isPlaying = false;
$timeout(onPlayerStateChange, 500);
}
Других решений пока нет …