javascript - 在 setTimeout 中修改 ng-show

Question

我有一个这样的 Controller :-

appControllers.controller("TaskAddController", function ($scope, $http) {
    $scope.task = {};
    $scope.messages = {};

    $scope.actions = {
        save : function() {
            $http.post("/ajax/tasks/save", $scope.task)
            .then(function() {
                $scope.messages.success = true;
                $scope.task = {};

                setTimeout(function () {
                    $scope.messages.success = false;
                }, 3000);
            });
        }
    };
});

View 看起来像这样:-

<div data-ng-controller="TaskAddController">
    <div data-ng-show="messages.success">Task Added</div>
    <div>
        <input data-ng-model="task.title" type="text" placeholder="Title...."/>
    </div>
    <div>
        <textarea data-ng-model="task.description" placeholder="Description..."></textarea>
    </div>
    <div>
        <input data-ng-click="actions.save()" type="submit" value="add"/>
    </div>
</div>

我想做的是在完成 AJAX 请求时我想显示包含已添加任务的 div，然后在 3 秒后让它消失 第一部分正在工作，例如当 AJAX 请求完成时，div 出现，但即使我的 setTimeout 确实发生了，div 也没有消失。

根据我的研究，我认为这是因为我需要启动 Angular 摘要。所以我尝试了以下操作:-

setTimeout(function () {
    $scope.messages.success = false;
    $scope.apply();
}, 3000);

但这似乎并没有什么不同。我错过了什么？

Answer 1

你应该使用$timeout。

$timeout(function () {
    $scope.messages.success = false;
}, 3000);

注意:您需要在 Controller 中注入(inject)$timeout。