ngIf doesn't update with variable

本文关键字：update with variable doesn ngIf | 更新日期: 2023-09-27

我有一个非常简单的ng-if结构，使用两个MD按钮和一个AngularJS作用域变量isPlaying。然而，ng-if似乎不能与变量一起工作。当我使用控制台工具单击按钮时，我可以看到变量在变化，但是DOM没有变化。奇怪的是，当我把其他Angular组件(比如主导航中的按钮)悬停时，ng-if似乎也会触发。

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;
}

问题是由超时块内包装的函数引起的。我用$timeout代替了setTimeout，一切都开始正常工作:

$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);
}