使用SweetAlert时HTML下拉框无法即时显示新增条目

这是个很典型的Angular异步操作导致视图不更新的问题，我来帮你捋清楚原因和解决办法：

原生的prompt是同步阻塞函数，代码执行到它的时候会暂停，直到用户输入完成。Angular在这类同步函数执行完毕后，会自动触发「消化循环（Digest Cycle）」，所以修改$scope后视图能立刻同步更新。

而SweetAlert是基于Promise的异步操作，它的回调函数运行在Angular的上下文之外。当你在回调里修改$scope的变量时，Angular完全不知道数据发生了变化，自然不会去更新视图——这就是为什么后端能拿到正确值，但下拉框没反应的原因。

核心思路是手动告诉Angular：“数据变了，快更视图！”，有两种简单可行的方法：

方法1：手动触发消化循环 #

在修改完$scope数据后，调用$scope.$apply()来强制启动消化循环：

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {
        swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then(versionName => {
            $scope.updateDropDownList(versionName);
            // 手动通知Angular更新视图
            $scope.$apply();
        });
    }
}

$scope.updateDropDownList = function(versionName) {
    $scope.requestDetails.decisionVersion = versionName;
    $scope.dcnVersions.push(versionName);
}

你也可以把$scope.$apply()直接放到updateDropDownList函数里，这样所有调用这个函数的地方都能自动触发更新：

$scope.updateDropDownList = function(versionName) {
    $scope.requestDetails.decisionVersion = versionName;
    $scope.dcnVersions.push(versionName);
    $scope.$apply();
}

方法2：用Angular的$timeout包裹更新逻辑 #

$timeout是Angular内置的服务，它会自动触发消化循环。只要把修改$scope的代码放到$timeout回调里就行（记得要在控制器里注入$timeout服务）：

// 确保你的控制器已经注入了$timeout服务
app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.onSetDecisionVersion = function() {
        if($scope.requestDetails.decisionVersion == 'New Version') {
            swal({
                text:'Enter new version name:',
                content:'input',
                button: {
                    text:"Enter",
                    closeModal:true,
                },
            }).then(versionName => {
                // 用$timeout包裹，自动触发消化循环
                $timeout(() => {
                    $scope.updateDropDownList(versionName);
                });
            });
        }
    }

    $scope.updateDropDownList = function(versionName) {
        $scope.requestDetails.decisionVersion = versionName;
        $scope.dcnVersions.push(versionName);
    }
}]);

修改后，用户在SweetAlert输入版本名并确认后，下拉框会立刻显示新增的版本并将其设为选中项，再也不用切换其他选项刷新啦。

内容的提问来源于stack exchange，提问作者theProdigyLebron