AngularJS에서 HTML을 동적으로 바인딩하는 방법 분석
- 高洛峰원래의
- 2016-12-07 15:06:161291검색
이 기사의 예에서는 AngularJS에서 HTML을 동적으로 바인딩하는 방법을 설명합니다. 다음과 같이 참조할 수 있도록 모든 사람과 공유하세요.
웹 프런트 엔드 개발에서는 백엔드 또는 동적 접합의 일부 HTML 문자열을 페이지 DOM 디스플레이에 동적으로 바인딩해야 하는 경우가 종종 있습니다. 특히 콘텐츠에서 관리 시스템(CMS: Content Management System의 약어)과 같은 요구 사항은 어디에나 있습니다.
Angular에서는 기본값은 추가된 HTML을 신뢰하지 않는 것입니다. 추가된 HTML 콘텐츠는 먼저 $sce.trustAsHtml을 사용하여 이것이 신뢰할 수 있는 HTML 콘텐츠임을 Angular에 알려야 합니다. 그렇지 않으면 $sce:unsafe 예외 오류가 발생합니다.
오류: [$sce:unsafe] 안전한 컨텍스트에서 안전하지 않은 값을 사용하려고 합니다.
다음은 간단한 각도 링크를 바인딩하는 데모입니다.
HTML :
<div ng-controller="DemoCtrl as demo"> <div ng-bind-html="demo.html"></div> </div>
JavaScript:
angular.module("com.ngbook.demo", [])
.controller("DemoCtrl", ["$sce", function($sce) {
var vm = this;
var html = '<p>hello <a href="https://angular.io/">angular</a></p>';
vm.html = $sce.trustAsHtml(html);
return vm;
}]);
간단한 정적 HTML의 경우, 이 문제는 해결되었습니다. 그러나 복잡한 HTML의 경우 복잡성은 각도 표현식과 지침이 포함된 HTML 템플릿을 의미합니다. 이를 위해 우리는 대규모 DOM 디스플레이를 바인딩할 뿐만 아니라 각도의 강력한 양방향 바인딩 메커니즘도 얻기를 희망합니다. ngBindHhtml은 양방향 바인딩을 위해 $scope와 연결되지 않습니다. HTML에 ngClick, ngHref, ngSHow, ngHide 및 기타 각도 명령이 있는 경우 이러한 버튼을 클릭해도 바인딩 표현이 발생하지 않습니다. 수식은 업데이트되지 않습니다. 예를 들어, 마지막 링크를 ng-href="demo.link"로 변경하려고 하면 링크가 구문 분석되지 않고 원래 HTML 문자열이 DOM에 계속 표시됩니다.
적용하려면 각도의 모든 명령이 컴파일을 거쳐야 합니다. 컴파일에는 사전 링크와 사후 링크가 포함되어 있으며 작동하기 전에 특정 동작에 연결됩니다. 대부분의 경우 컴파일은 각도가 시작될 때 자동으로 컴파일됩니다. 하지만 동적으로 추가된 템플릿이라면 수동으로 컴파일해야 합니다. Angular는 이 기능을 구현하기 위해 $compile 서비스를 제공합니다. 다음은 보다 일반적인 컴파일 예입니다.
HTML:
<body ng-controller="DemoCtrl as demo">
<dy-compile html="{{demo.html}}">
</dy-compile>
<button ng-click="demo.change();">change</button>
</body>
JavaScript:
angular.module("com.ngbook.demo", [])
.directive("dyCompile", ["$compile", function($compile) {
return {
replace: true,
restrict: 'EA',
link: function(scope, elm, iAttrs) {
var DUMMY_SCOPE = {
$destroy: angular.noop
},
root = elm,
childScope,
destroyChildScope = function() {
(childScope || DUMMY_SCOPE).$destroy();
};
iAttrs.$observe("html", function(html) {
if (html) {
destroyChildScope();
childScope = scope.$new(false);
var content = $compile(html)(childScope);
root.replaceWith(content);
root = content;
}
scope.$on("$destroy", destroyChildScope);
});
}
};
}])
.controller("DemoCtrl", [function() {
var vm = this;
vm.html = '<h2>hello : <a ng-href="{{demo.link}}">angular</a></h2>';
vm.link = 'https://angular.io/';
var i = 0;
vm.change = function() {
vm.html = '<h3>change after : <a ng-href="{{demo.link}}">' + (++i) + '</a></h3>';
};
}]);
여기서 dy-compile이라는 지시문이 생성됩니다. 이는 먼저 바인딩 속성의 html 값 변경을 수신합니다. html 콘텐츠가 있으면 먼저 하위 범위를 생성하려고 시도합니다. 그런 다음 $compile 서비스를 사용하여 수신 HTML을 동적으로 연결하고 현재 DOM 노드를 교체합니다. 여기서 하위 범위를 만드는 이유는 DOM이 소멸될 때마다 범위 소멸을 촉진하고 HTML 컴파일 밴드를 제거하기 위한 것입니다. 감시자는 기능하며 마지막 상위 범위가 삭제되면 범위도 삭제하려고 시도합니다.
위의 컴파일 컴파일 및 연결로 인해 ngHref 명령이 적용될 수 있습니다. 다음은 동적 컴파일 각도 모듈의 예를 제공하려는 시도일 뿐입니다. 특정 구현 방법에 대해서는 비즈니스에 문의하여 특정 지시문을 선언하세요.