$ parse, $ interpolate 및 $ compile 서비스의 차이점은 무엇입니까?

사이의 차이 무엇입니까 $parse, $interpolate그리고 $compile서비스는? 나에게 그들은 모두 같은 일을한다. 템플릿을 가져 와서 템플릿 함수로 컴파일하십시오.

사람들은 AngularJS와의 원조는 (비록 렌더링 뷰 것을 서비스의 예입니다 $parse및 $interpolate이 도메인 외부에서 사용될 수있다). 각 서비스의 역할을 설명하기 위해이 HTML을 예로 들어 보겠습니다.

var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'

범위의 값 :

$scope.name = 'image';
$scope.extension = 'jpg';

이 마크 업이 주어지면 각 서비스가 테이블에 가져 오는 것입니다.

• $compile-전체 마크 업을 가져 와서 특정 범위에 대해 실행될 때 HTML 텍스트 조각을 모든 지시문 (여기서는 ng-src)이 모델 변경에 반응하는 동적 라이브 DOM으로 변환하는 연결 함수로 변환 할 수 있습니다 . $ compile (imgHtml) ($ scope)와 같이 호출하면 결과적으로 모든 DOM 이벤트 경계가있는 DOM 요소를 가져옵니다. $compile일을하기 위해 $interpolate(다른 것들 중에서) 사용하고 있습니다 .
• $interpolate보간 표현식이 포함 된 문자열을 처리하는 방법을 알고 있습니다 (예 :) /path/{{name}}.{{extension}}. 즉, 보간 표현식, 범위가있는 문자열을 가져 와서 결과 텍스트로 변환 할 수 있습니다. $interpolation서비스를 매우 간단한 문자열 기반 템플릿 언어로 생각할 수 있습니다. 위의 예 $interpolate("/path/{{name}}.{{extension}}")($scope)에서 path/image.jpg문자열을 결과로 얻으려면 다음과 같이이 서비스를 사용하십시오 .
• $parse범위에 대해 $interpolate개별 표현식 ( name, extension) 을 평가 하는 데 사용됩니다 . 그것은 모두에 사용할 수있는 읽기 및 세트 주어진 식의 값. 예를 들어, name표현식 을 평가 $parse('name')($scope)하려면 "이미지"값을 얻으십시오. 값을 설정하려면 다음을 수행하십시오.$parse('name').assign($scope, 'image2')

이러한 모든 서비스는 AngularJS에서 라이브 UI를 제공하기 위해 협력하고 있습니다. 그러나 그들은 다른 수준에서 작동합니다.

• $parse개별 표현에만 관련됩니다 ( name, extension). 읽기-쓰기 서비스입니다.
• $interpolate읽기 전용이며 여러 표현식을 포함하는 문자열과 관련이 있습니다 ( /path/{{name}}.{{extension}})
• $compile AngularJS 기계의 핵심이며 HTML 문자열 (지시문 및 보간 표현식 포함)을 라이브 DOM으로 변환 할 수 있습니다.

$interpolate-->

Let us say you have two variables assigned to $scope object in the controller,

$scope.a = 2;
$scope.b = 3;

var f = $interpolate("Result is : {{a*b}}");
var result = f($scope);
console.log(result);   --->'Result is 6'

This means that $interpolate can take the string which has one or more angular expressions.

Now $parse:

var f1 = $parse("a*b");
var result1 = f1($scope);
console.log(result1);   ----> '6'

**So $interpolate has the capability to evaluate a string with angular expressions mixed up in the string against the scope to get the result**.


Another important difference between $interpolate and $parse,$eval is:

**$interpolate has the capability to work with strings containing filters along with angular expressions.**

This feature is not accessible in $eval , $parse.

console.log($interpolate("Result is : {{a*b | currency : 'USD$'}}")($scope));

---> 'Result is USD $6.00'

$ intervalate는 $ eval 및 $ parse에서와 같이 $ scope 변수에 대한 쓰기 액세스 권한이 없습니다.

$ parse, $ interpolate ---> 주입이 필요하지만 컨트롤러 또는 $ eval을 사용하는 경우 $ eval을 주입 할 필요는 없습니다.

$ parse, $ interpolate는 모든 컨텍스트에 대해 평가할 수있는 기능을 제공하지만 $ eval은 항상 $ scope에 대해 평가됩니다.

씬 뒤의 $ eval 및 $ interpolate는 $ parse 만 사용합니다.

여기에 귀여운 설명이 있습니다.

var img = img/{{name}}.{{extension}}

$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.