如何在 AngularJS 中使用 $scope.$apply() ？

在本文中，我们将讨论 $apply()函数以及如何在 angularjs 中使用它。在 AngularJS 中，$apply()函数用于评估 AngularJS 上下文（浏览器 DOM 事件、XHR）之外的表达式。此外，$apply 在其底层有 $digest，每当调用 $apply() 以更新数据绑定时，最终都会调用它。我们将举一个例子来更好地理解。

不使用 $scope.$apply()函数：在下面的代码中，可以看到我们有两个按钮，但是一个按钮有一个 ng-click 事件来更新名称，而另一个有一个标准的 JavaScript 监听器来更新姓名。因此，您可以看到，当单击第一个按钮时，名称从“GFG”更改为“GFG Rocks”，但当单击第二个按钮时，由于缺少 $scope，名称并未更新为“Geeks”。 $apply 调用。

HTML

  

    $apply() Function in AngularJs
    
    
  
    
        var app = angular.module("applyApp", []);
        app.controller("applyCtrl", function ($scope) {
            $scope.currentName = "GFG";
            $scope.updatedName = function () {
                $scope.currentName = "GFG Rocks";
            };
  
            // Event listener added
            var event = document.getElementById("btnapply");
            event.addEventListener("click", function () {
  
                // To update name on rootScope forcefully,
                // use $apply function
                $scope.currentName = "Geeks";
            });
        });
    

  

    
        $apply() Function in AngularJs
        
  
        
              
        {{currentName}}
    

  

输出：

使用 $scope.$apply() 调用：在上面的代码中，可以看到我们有两个按钮，但是一个按钮有一个 ng-click 事件来更新名称，而另一个有一个标准的 JavaScript 监听器来更新名称.因此，您可以看到，当单击第一个按钮时，名称从“GFG”变为“GFG Rocks”，而当单击第二个按钮时，由于 $scope.$ 的存在，名称会更新为“Geeks”。在此应用调用。

HTML

  

    $apply() Function in AngularJs
    
    
  
    
        var app = angular.module("applyApp", []);
        app.controller("applyCtrl", function ($scope) {
            $scope.currentName = "GFG";
            $scope.updatedName = function () {
                $scope.currentName = "GFG Rocks";
            };
  
            // Event listener added
            var event = document.getElementById("btnapply");
            event.addEventListener("click", function () {
                $scope.$apply(() => {
  
                    // To update name on rootScope 
                    // forcefully, use $apply function
                    $scope.currentName = "Geeks";
                });
            });
        });
    

  

    
        $apply() Function in AngularJs
        
  
        
              
        {{currentName}}
    

  

输出：