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

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

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

<!DOCTYPE html>
<html>
  
<head>
    <title>apply() Function in AngularJs</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
  
    <script type="text/javascript">
        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,
                // useapply function
                scope.currentName = "Geeks";
            });
        });
    </script>
</head>
  
<body>
    <div ng-app="applyApp" ng-controller="applyCtrl">
        <h2>apply() Function in AngularJs</h2>
        <input type="button" 
            value="Click to Update Name" 
            ng-click="updatedName()" />
  
        <input type="button" 
            value="Click to Update Name forcefully." 
            id="btnapply" />
              
        <span style="color: Red">{{currentName}}</span>
    </div>
</body>
  
</html>

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

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

<!DOCTYPE html>
<html>
  
<head>
    <title>apply() Function in AngularJs</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
  
    <script type="text/javascript">
        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, useapply function
                    scope.currentName = "Geeks";
                });
            });
        });
    </script>
</head>
  
<body>
    <div ng-app="applyApp" ng-controller="applyCtrl">
        <h2>apply() Function in AngularJs</h2>
        <input type="button" 
            value="Click to Update Name" 
            ng-click="updatedName()" />
  
        <input type="button" 
            value="Click to Update Name forcefully." 
            id="btnapply" />
              
        <span style="color: Red">{{currentName}}</span>
    </div>
</body>
  
</html>