Question

我有一个从其父控制器继承范围的指令。该指令是一个div元素，它将页面覆盖三秒钟然后消失，除非单击向上/向下箭头按钮。 div元素充当一种模态。这是我的DOM上的代码

HTML

<div ng-show="volumeVisibility">
    <display-volume-modal></display-volume-modal>
</div>

默认设置为false。当volumeVisibility === true时，指令将在单击按钮时显示。到现在为止还挺好。这些是我在控制器中的两个功能：

$scope.volumeVisibility = false;

$scope.timer = function(){ 
    console.log("Timer");
    $scope.volumeVisibility = false;
};

$scope.displayVolumeModal = function(){
    $scope.volumeVisibility = true;
    console.log("modal");   
};

超时工作并设置$scope.volumeVisibility === false。但是，div不会从页面中删除自己。这是指令中的代码（我删除了不相关的部分）：

return {
    restrict: 'E',
    scope: false,
    link: function(scope, elem, attrs){
        scope.$watch('volumeVisibility', function(newVal, oldVal){
            if (newVal === true){
                window.setTimeout(scope.timer, 3000);           
                document.addEventListener('keydown', function(e){
                    //stuff
                    switch (e.which) {              
                        case 38:
                            //stuff
                            break;
                        case 40:
                            //stuff
                            break;
                    }
                });
            }
        }, true);
    },
    templateUrl: 'public/templates/displayVolumeModal.html'
}

我已尝试将每个功能放入指令或控制器中。我可以采取什么步骤使该指令DIV元素在超时后消失？

Answer 1

没有任何事情发生，因为没有调用消化循环。

要更新同步，您必须运行摘要周期。我认为，在这种情况下，您可以使用$timeout服务而不是setTimeout。

$ timeout服务的好处：

单元可测试
$ digest循环在您传递给超时的函数

Answer 2

window.setTimeout(scope.timer, 3000);不会调用角度digest周期，因此watch看不到更改。

使用angular的$timeout服务，如下所示：

$timeout(scope.timer, 3000);

在内部，它与window.setTimeout相同，但请确保digest之后会被调用。

详细了解angular digest cycle以及角度检查是否有某些变量发生变化。特别是Integration with the browser event loop章。

Answer 3

如果您使用 ng-show和ng-hide ，则只会隐藏应用它的特定html元素的可见性。元素将存在于DOM中，无论它是ng-hide还是ng-show。这就是没有调用该指令的原因。

如果您想在每次出现在屏幕上时调用该指令，只需使用 ng-if 代替 ng-show 。

使用超时显示和隐藏自定义指令元素

3 个答案: