Angular 服务范围变化不影响模板

Question

我设置了一个可以在模板上显示状态消息的服务。

.service('displayStatus', function ()
{
    var statusTime = 5000;
    var self = this;

    this.show = function ($scope, type, msg)
    {
        $scope.status = {
            type: type,
            msg: msg
        }

        self.timer = setTimeout(function ()
        {
            self.hide($scope);

        }, statusTime);
    }

    this.hide = function ($scope)
    {
        $scope.status = {
            type: null,
            msg: null
        }
        console.log('hid it', $scope);
    }
})

每当我想要显示错误时，我只需调用 displayStatus.show($scope, 'error', 'Uh oh! An error!')。是 setTimeout 给我带来了问题。虽然模板将根据我在 "this.show" 中所做的更改进行更新，但在等待 5 秒并尝试隐藏它后，更改不适用，即使 console.log 显示我正在更改 $scope .

为什么我的更改没有显示？

Answer 1

您需要将事件处理程序的主体包装在 $scope.$apply, or better yet, use the $timeout 服务中以执行超时，它会为您完成此操作。调用您的函数后，$apply 触发一个 $digest 循环，这就是 angular 检测模型变化的方式。

.service('displayStatus', function ($timeout)
{
    var statusTime = 5000;
    var self = this;

    this.show = function ($scope, type, msg)
    {
        $scope.status = {
            type: type,
            msg: msg
        }

        self.timer = $timeout(function ()
        {
            self.hide($scope);
        }, statusTime);
    }

    this.hide = function ($scope)
    {
        $scope.status = {
            type: null,
            msg: null
        }
        console.log('hid it', $scope);
    }
})

Angular 服务范围变化不影响模板

Angular scope changes in service not affecting template

javascript

angularjs