setTimeout 中的函数不会修改 $scope 变量/CSS 属性答案

【问题标题】：Function inside setTimeout doesn't modify $scope variables / CSS propertiessetTimeout 中的函数不会修改 $scope 变量/CSS 属性
【发布时间】：2016-04-26 00:32:38
【问题描述】：

我正在与 setTimeout() 作斗争，甚至无法理解问题所在。我首先认为这是一个范围问题，但无法解决。

我想延迟一个 DIV 的隐藏/取消隐藏，让我的 CSS 在不透明度上的过渡开始，但是当我单击 alert_button 淡化然后隐藏警报时，它只会淡化并且我留下一个不可见的 div .延迟的 $scope.alert_token 不会切换到“true”，并且我的警报的不透明度停留在 1。

app.js：

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
    $scope.alert_token = true // hide if true
    $scope.alert_message = ""
    $scope.p_name = ""

    $scope.isInArray = function(arr, item) {
        // IF ITEM IS ALREADY IN ARRAY
        if (arr.indexOf(item) > -1) {
            $scope.alert_token = !$scope.alert_token
            $scope.alert_message = "Entry already exists"
            setTimeout(function() {
                document.getElementById("alert").style.opacity = "1"
            }, 305)
        }
        else ...
    }

    $scope.submit = function(listType) {
        if (listType == "player") {
            $scope.isInArray(p_list, $scope.p_name)
            $scope.p_name = ""
        }
        else ...
    }

    $scope.closeAlert = function() {
        document.getElementById("alert").style.opacity = "0"
        setTimeout(function() {
            $scope.alert_token = !$scope.alert_token
        }, 305)
    }

【问题讨论】：

您需要使用 $timeout 或 scope.$apply() （不好的做法）和 setTimeout 以便消化周期开始更新 DOM

标签： javascript html css angularjs

【解决方案1】：

在 Angular 知识之外发生的任何事情都不会更新到 DOM。在您的情况下，它是setTimeout。请改用$timeout。

......
.controller('myCtrl', function($scope, $timeout) {...
                                       ^^^^^^^^
//Other code
....
   $scope.closeAlert = function() {
        document.getElementById("alert").style.opacity = "0"
        $timeout(function() {//$timeout
            $scope.alert_token = !$scope.alert_token
        }, 305)
    }

此外，由于您使用的是angularJS，因此我建议您使用 ngClass 和 ngStyle

【讨论】：