programing

Angular JS에서 ngBind, ngBindHtm & ngBindTemplate의 차이

starjava 2023. 9. 24. 12:17
반응형

Angular JS에서 ngBind, ngBindHtm & ngBindTemplate의 차이

처음입니다.Angular JS.

너희들 중 누구라도 나에게 설명해 줄 수 있니?ngBind,ngBindHtm&ngBindTemplate인에Angular JS예를 들어요?

응-

ngBind는 지정된 HTML 요소의 텍스트 내용을 지정된 식의 값으로 대체하는 데 사용됩니다.예를 들어 html을 가지고 있다면 다음과 같습니다.<b ng-bind="name"></b>컨트롤러에 이름에 대한 값을 지정합니다.$scope.name = "John". 그러면 다음과 같은 결과가 나옵니다.<b>John</b>. 그러나 여러 값을 사용하여 하나의 html 요소에 바인딩할 수는 없습니다.예를들면

$scope.first_name = "John";
$scope.second_name = "D";
<b ng-bind="first_name second_name"></b> 

이렇게 하면 다음과 같은 결과를 얻을 수 없습니다.<b>John D</b> bindfirst_name만.따라서 여러 값을 바인딩하는 데 사용할 수 있습니다.ng-bind-template

ng-bind-

 $scope.first_name = "John";
 $scope.second_name = "D";

<b ng-bind-template="{{first_name second_name}}"></b>

그러면 이 둘 다에서 html 태그를 렌더링할 수 없습니다.html 템플릿을 렌더링하기 위해서 ng-bind-html을 사용할 수 있습니다.

ng-bind-

$scope.name = "<b>John</b>";
<div ng-bind-html="name"></div>

이렇게 하면 표시 대신 이 표시됩니다.<b>John</b>. 즉, html 태그를 표시하는 대신 html을 렌더링합니다.

예제를 보려면 이 링크를 클릭합니다.

ngBind:

ngBind 특성은 Angular에서 지정된 HTML 요소의 텍스트 내용을 주어진 식의 값으로 바꾸고 해당 식의 값이 변경되면 텍스트 내용을 업데이트하도록 알려줍니다.

ngBind 템플릿:

ngBindTemplate 지시문은 요소 텍스트 내용을 ngBindTemplate 특성의 템플릿 보간으로 바꾸도록 지정합니다.ngBind와 달리 ngBindTemplate는 여러 개의 {{}}식을 포함할 수 있습니다.일부 HTML 요소(TITLE 및 OPTION 등)에는 SPAN 요소가 포함될 수 없으므로 이 지시문이 필요합니다.ngBindTemplate는 " 문자열"만 실행합니다.

차이에 대한 간단한 비유:

ngBind는 "개체"만 실행합니다.

ngBindTemplate는 " 문자열"만 실행합니다.

언급URL : https://stackoverflow.com/questions/21084008/difference-between-ngbind-ngbindhtm-ngbindtemplate-in-angular-js

반응형