ng-bind-html을 사용하여 중첩된 Angular 템플릿을 동적으로 컴파일하는 방법은 무엇입니까?

AngularJS: ng-bind-html을 사용하여 중첩된 Angular 템플릿 컴파일

문제:

ng-bind-html을 사용하여 Angular 템플릿을 동적으로 포함하면 템플릿이 해석 및 실행되는 대신 일반 HTML로 표시됩니다.

해결책:

Angular를 컴파일하려면 ng-bind-html 내의 템플릿에서는 타사 지시문 "angular-bind-html-compile"을 활용합니다.

구현:

1단계: 다음을 사용하여 지시어를 설치합니다.

npm install angular-bind-html-compile

2단계: Angular 모듈에 지시어를 추가합니다.

<code class="javascript">angular.module("app", ["angular-bind-html-compile"])</code>

3단계: 템플릿에서 HTML을 동적으로 포함하려는 요소에 대해 bind-html-compile 지시문을 사용합니다.

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

예:

컨트롤러:

<code class="javascript">$scope.myDynamicHtml = "<div ng-controller='myController'><span>Hello {{ myName }}</span></div>";</code>

템플릿에서:

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

참고:

• 지시문은 값의 변화를 감시합니다. bin-html-compile 속성에 할당하고 그에 따라 HTML을 다시 컴파일합니다.
• 이 솔루션을 사용하면 템플릿의 내용이나 복잡성에 관계없이 ng-bind-html 내에서 Angular 템플릿을 동적으로 렌더링할 수 있습니다.

위 내용은 ng-bind-html을 사용하여 중첩된 Angular 템플릿을 동적으로 컴파일하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!