Verwendung der $eval-Funktion in Angular
-
Schritte zur Verwendung der Funktion
$evalin Angular -
Vor- und Nachteile der Verwendung der
$eval-Funktion in Angular
In Angular können wir das ng-model verwenden, um die Benutzereingabe an ein bestimmtes Element zu binden. Aber wenn wir auf den Wert eines Ausdrucks zugreifen wollen, können wir $eval verwenden.
Der Dienst $eval ist ein Wrapper um den Angular-Compiler. Es bietet eine saubere Schnittstelle zum Auswerten von Ausdrücken, die an es übergeben werden.
Es nimmt einen Ausdruck und wertet ihn im Kontext des aktuellen Gültigkeitsbereichs aus, was bedeutet, dass alle Variablenbindungen aus dem aktuellen Gültigkeitsbereich innerhalb des Ausdrucks verfügbar sind.
Dies unterscheidet sich von Vanille eval. Der Service $eval wertet einen Ausdruck im Kontext des aktuellen Geltungsbereichs aus, nicht global wie bei Vanilla eval.
Um $eval zu verwenden, müssen Sie sich darüber im Klaren sein, dass es relativ zu einem bestimmten Bereich und nicht außerhalb eines Bereichs ausgewertet wird.
Schritte zur Verwendung der Funktion $eval in Angular
Wir können die Funktion $eval verwenden, um einen Ausdruck während der Lebensdauer der Anwendung auszuführen. Dies kann nützlich sein, um Code bedingt auszuführen oder ihn nur einmal zu implementieren.
-
Definieren Sie einen Angular-Dienst, der unseren Kontext und die
$eval-Funktion enthält. -
Erstellen Sie eine Direktive, um Ausdrücke oder Callbacks innerhalb ihrer Link-Funktion auszuwerten.
-
Fügen Sie es in den Controller der Direktive ein und binden Sie es an eine öffentliche Variable namens
$eval. -
Verwenden Sie
$evalin Ihrer Vorlage, wo immer Sie Code basierend auf seinem Zustand oder seinen Bedingungen ausführen möchten.
Lassen Sie uns ein Beispiel für $eval besprechen.
JavaScript-Code:
var app = angular.module('Adil', []);
app.controller("Demo", function($scope) {
$scope.int1 = 10;
$scope.int2 = 20;
$scope.result = $scope.$eval('int1 +int2');
});
HTML Quelltext:
<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>
Klicken Sie hier, um die Funktion des Codes wie oben erwähnt zu überprüfen.
Vor- und Nachteile der Verwendung der $eval-Funktion in Angular
Wir können die Funktion $eval in Angular verwenden, um einen Ausdruck zur Laufzeit auszuwerten. Es ist von Vorteil, wenn Sie ein DOM-Element dynamisch erstellen und zum DOM hinzufügen möchten oder wenn Sie etwas mit einem Objekt tun müssen, auf das keine andere Zugriffsmöglichkeit besteht.
Die Funktion $eval hat jedoch einige Nachteile. Der erste Nachteil ist, dass es Sicherheitslücken einführen kann, da es Ihre Anwendung anfälliger für Injektionsangriffe macht, wenn es nicht richtig verwendet wird.
Der zweite Nachteil ist, dass die Verwendung von $eval bedeutet, dass Ihr Code weniger lesbar wird, da er für häufigere Ausdrücke auf die Verkettung von Zeichenfolgen anstelle von Funktionen oder Variablen angewiesen ist.
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