javascript - 如果没有 $scope.$apply 则修改范围不起作用

Question

我有一个按钮指令，单击该按钮时会显示加载屏幕。

angular.module('randomButton', ['Data'])

.directive('randomButton', function(Data) {
     return {
        scope: '=',
        restrict: 'A',
        templateUrl: 'templates/components/randomButton.html',
        link: function(scope, element, attrs){

            element.click(function(){
                scope._loading();
            });

        }
    }
});

它通过在不同指令中包含的范围内调用另一个函数来实现此目的:

angular.module('quoteContainer', [])

.directive('quoteContainer', function(Data) {

    function quoteController($scope){

        $scope._loading = function(){
            console.log('loading');
            $scope.loadMessage = Data.getRandomText();
            $scope.loading = true;              
        };

    }

    return {
        scope: '=',
        restrict: 'A',
        templateUrl: 'templates/components/quoteContainer.html',
        controller: ['$scope', quoteController],
        link: function(scope,element,attrs){

        }
    }
});

我的问题是，要发生此更改，我必须在 ._loading() 函数中调用 $scope.$apply 。例如:

$scope._loading = function(){
    console.log('loading');
    $scope.$apply(function(){
        $scope.loadMessage = Data.getRandomText();
        $scope.loading = true;              
    });         
};

我知道这是不好的做法，只应在与其他框架/ajax 调用等交互时使用。那么为什么我的代码在没有 $scope.$apply 的情况下拒绝工作，以及如何才能没有它我也能正常工作吗？

Answer 1

基本上，您需要让 Angular 了解发生更改的某种方式，因为由于它位于异步事件处理程序中，所以 Angular 通知更改的常用机制不适用于它。

因此需要将其包装在 $apply 中，这会在代码运行后触发摘要周期，从而使 Angular 有机会根据新数据进行更改。然而，这样做的首选方法是使用 Angular 的内置 $timeout服务，它实际上执行相同的操作(即将您的代码包装在 $apply block 中)，但不会出现触发时可能正在进行其他摘要周期的问题。

您可以像当前使用 $apply 一样使用它:

$timeout(function(){
    $scope.loadMessage = Data.getRandomText();
    $scope.loading = true;              
});         

(如果您确实想延迟值的应用，则可以使用第二个参数，但在您的情况下没有必要。)