Angular で$eval 関数を使用する
Angular では、ng-model を使用してユーザー入力を特定の要素にバインドできます。ただし、式の値にアクセスする場合は、$eval を使用できます。
$eval サービスは Angular コンパイラのラッパーです。渡される式を評価するためのクリーンなインターフェイスを提供します。
式を受け取り、現在のスコープのコンテキストで評価します。つまり、現在のスコープからの変数バインディングはすべて式内で使用できます。
これはバニラ eval とは異なります。 $eval サービスは、バニラ eval のようにグローバルにではなく、現在のスコープのコンテキストで式を評価します。
$eval を使用するには、スコープ外ではなく、特定のスコープに関連して評価されることに注意する必要があります。
Angular で $eval 関数を使用する手順
$eval 関数を使用して、アプリケーションの存続期間中に式を実行できます。これは、コードを条件付きで実行したり、コードを 1 回だけ実装したりする場合に役立ちます。
-
コンテキストと
$eval関数を保持する Angular サービスを定義します。 -
リンク関数内の式またはコールバックを評価するディレクティブを作成します。
-
ディレクティブのコントローラーに挿入し、
$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 関数にはいくつかの欠点があります。最初の欠点は、正しく使用しないとアプリケーションがインジェクション攻撃を受けやすくなるため、セキュリティの脆弱性が発生する可能性があることです。
2 番目の欠点は、$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