En este artículo, discutiremos la función $apply() y cómo usarla en angularjs. En AngularJS, la función $apply() se usa para evaluar expresiones fuera del contexto de AngularJS (navegador DOM Events, XHR). Además, $apply tiene $digest bajo su capó, que finalmente se llama cada vez que se llama a $apply() para actualizar los enlaces de datos. Tomaremos un ejemplo para dar una mejor comprensión.
Sin usar la función $scope.$apply(): en el siguiente código, se puede ver que tenemos dos botones, pero un botón tiene un evento ng-click para actualizar el nombre, mientras que el otro tiene un oyente de JavaScript estándar para actualizar el nombre. Entonces, puede ver que cuando se hace clic en el primer botón, el nombre cambia de «GFG» a «GFG Rocks», pero cuando se hace clic en el segundo botón, el nombre no se actualiza a «Geeks» debido a la ausencia de $scope. $aplicar llamada.
HTML
<!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,
// use $apply 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>
Producción:
Usando la llamada $scope.$apply(): en el código anterior, se puede ver que tenemos dos botones, pero un botón tiene un evento ng-click para actualizar el nombre, mientras que el otro tiene un oyente de JavaScript estándar para actualizar el nombre . Entonces, puede ver que cuando se hace clic en el primer botón, el nombre cambia de «GFG» a «GFG Rocks» y cuando se hace clic en el segundo botón, el nombre se actualiza a «Geeks» debido a la presencia de $scope.$aplicar llamada en este.
HTML
<!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, use $apply 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA