Angular에서 $Eval 함수 사용

Muhammad Adil 2023년1월30일

Angular Angular Function

Angular에서 $eval 함수를 사용하는 단계
Angular에서 $eval 함수 사용의 장단점

Angular에서는 ng-model을 사용하여 사용자 입력을 특정 요소에 바인딩할 수 있습니다. 그러나 표현식의 값에 액세스하려면 $eval을 사용할 수 있습니다.

$eval 서비스는 Angular 컴파일러를 둘러싼 래퍼입니다. 전달된 표현식을 평가하기 위한 깨끗한 인터페이스를 제공합니다.

표현식을 가져와 현재 범위의 컨텍스트에서 평가합니다. 즉, 현재 범위의 모든 변수 바인딩을 표현식 내에서 사용할 수 있습니다.

이것은 바닐라 eval과 다릅니다. $eval 서비스는 바닐라 eval처럼 전역적으로가 아니라 현재 범위의 컨텍스트에서 표현식을 평가합니다.

$eval을 사용하려면 특정 범위를 기준으로 평가되며 범위 밖이 아님을 알아야 합니다.

Angular에서 `$eval` 함수를 사용하는 단계

$eval 함수를 사용하여 애플리케이션 수명 동안 표현식을 실행할 수 있습니다. 이는 조건부로 코드를 실행하거나 한 번만 구현하는 데 유용할 수 있습니다.

컨텍스트와 $eval 기능을 보유할 Angular 서비스를 정의합니다.
링크 함수 내에서 표현식이나 콜백을 평가하는 지시문을 만듭니다.
지시어의 컨트롤러에 삽입하고 $eval이라는 공용 변수에 바인딩합니다.
상태 또는 조건을 기반으로 코드를 실행하려는 모든 위치에서 템플릿에서 $eval을 사용합니다.

$eval의 예를 살펴보겠습니다.

자바스크립트 코드:

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>

여기를 클릭 위에서 언급한 코드의 작동을 확인하십시오.