在 Angular 中使用 $eval 函式
在 Angular 中，我們可以使用 ng-model 將使用者輸入繫結到特定元素。但是如果我們想訪問一個表示式的值，我們可以使用 $eval。
$eval 服務是 Angular 編譯器的包裝器。它為評估傳遞給它的表示式提供了一個乾淨的介面。
它接受一個表示式並在當前範圍的上下文中對其進行評估，這意味著來自當前範圍的任何變數繫結都將在表示式中可用。
這與香草 eval 不同。 $eval 服務在當前範圍的上下文中計算表示式，而不是像 vanilla eval 那樣全域性計算。
要使用 $eval，你需要注意它將相對於特定範圍而不是任何範圍之外進行評估。
在 Angular 中使用 $eval 函式的步驟
我們可以使用 $eval 函式在應用程式的生命週期內執行表示式。這對於有條件地執行程式碼或僅實現一次非常有用。
-
定義一個 Angular 服務來儲存我們的上下文和
$eval函式。 -
建立一個指令來評估其連結函式中的表示式或回撥。
-
將其注入指令的控制器並將其繫結到一個名為
$eval的公共變數。 -
在模板中根據狀態或條件執行程式碼的任何地方使用
$eval。
讓我們討論一個 $eval 的例子。
JavaScript 程式碼：
var app = angular.module('Adil', []);
app.controller("Demo", function($scope) {
$scope.int1 = 10;
$scope.int2 = 20;
$scope.result = $scope.$eval('int1 +int2');
});
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>
單擊此處檢查上述程式碼的工作情況。
在 Angular 中使用 $eval 函式的優缺點
我們可以使用 Angular 中的 $eval 函式在執行時計算表示式。當你想要動態建立 DOM 元素並將其新增到 DOM 或需要對沒有任何其他訪問方式的物件執行某些操作時，它很有用。
然而，$eval 函式有一些缺點。第一個缺點是它可能會引入安全漏洞，因為如果使用不當，它會使你的應用程式更容易受到注入攻擊。
第二個缺點是使用 $eval 意味著你的程式碼變得不那麼可讀，因為它依賴於字串連線而不是函式或變數來獲得更常見的表示式。
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