Utiliser la fonction $Eval dans Angular
-
Étapes pour utiliser la fonction
$evaldans Angular -
Avantages et inconvénients de l’utilisation de la fonction
$evaldans Angular
Dans Angular, nous pouvons utiliser le ng-model pour lier l’entrée de l’utilisateur à un élément particulier. Mais si on veut accéder à la valeur d’une expression, on peut utiliser $eval.
Le service $eval est un wrapper autour du compilateur Angular. Il fournit une interface propre pour évaluer les expressions qui lui sont transmises.
Il prend une expression et l’évalue dans le contexte de la portée actuelle, ce qui signifie que toute liaison de variable de la portée actuelle sera disponible dans l’expression.
C’est différent de eval vanille. Le service eval évalue une expression dans le contexte de la portée actuelle, et non globalement comme avec la vanille eval.
Pour utiliser $eval, vous devez être conscient qu’il sera évalué par rapport à un périmètre spécifique et non en dehors de tout périmètre.
Étapes pour utiliser la fonction $eval dans Angular
On peut utiliser la fonction $eval pour exécuter une expression pendant la durée de vie de l’application. Cela peut être utile pour exécuter du code de manière conditionnelle ou pour l’implémenter une seule fois.
-
Définir un service Angular qui contiendra notre contexte et la fonction
$eval. -
Crée une directive pour évaluer des expressions ou des rappels dans sa fonction de lien.
-
Injectez-le dans le contrôleur de la directive et liez-le à une variable publique appelée
$eval. -
Utilisez
$evaldans votre modèle partout où vous souhaitez exécuter du code en fonction de son état ou de conditions.
Examinons un exemple de $eval.
Code Javascript :
var app = angular.module('Adil', []);
app.controller("Demo", function($scope) {
$scope.int1 = 10;
$scope.int2 = 20;
$scope.result = $scope.$eval('int1 +int2');
});
Code HTML:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body >
<h2>Example of Angular $eval</h2>
<div ng-app="Adil">
<div ng-controller="Demo">
<input type="text" ng-model="int1" > + <input type="text" ng-model="int2" >
<p
>{{'Result: ' + result}}</p>
</div>
</div>
</body>
</html>
Cliquez ici pour vérifier le fonctionnement du code comme mentionné ci-dessus.
Avantages et inconvénients de l’utilisation de la fonction $eval dans Angular
Nous pouvons utiliser la fonction $eval dans Angular pour évaluer une expression à l’exécution. C’est utile lorsque vous souhaitez créer dynamiquement un élément DOM et l’ajouter au DOM ou lorsque vous devez faire quelque chose avec un objet qui n’a pas d’autre moyen d’accès.
Cependant, la fonction $eval présente quelques inconvénients. Le premier inconvénient est qu’il peut introduire des failles de sécurité car il rend votre application plus sensible aux attaques par injection si elle n’est pas utilisée correctement.
Le deuxième inconvénient est que l’utilisation de $eval signifie que votre code devient moins lisible car il repose sur la concaténation de chaînes au lieu de fonctions ou de variables pour des expressions plus courantes.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook