没有$ 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块中），但不会出现其他摘要周期可能出现的问题触发时仍在进行中。

您可以像现在使用$ apply一样使用它：

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

（如果您确实想延迟值的应用，则可能需要第二个参数，但是在您的情况下则没有必要。）