그 상황
Angular 앱 내에는 ng-bind-html-unsafe 속성을 가진 div를 포함하는 컨트롤러가 지원하는 Page라는 지시문이 중첩되어 있습니다. 이것은 'pageContent'라는 $ scope var에 할당됩니다. 이 var는 데이터베이스에서 동적으로 생성 된 HTML을 할당받습니다. 사용자가 다음 페이지로 넘어 가면 DB에 대한 호출이 이루어지고 pageContent var가이 새로운 HTML로 설정되어 ng-bind-html-unsafe를 통해 화면에 렌더링됩니다. 코드는 다음과 같습니다.
페이지 지시문
angular.module('myApp.directives')
.directive('myPage', function ($compile) {
return {
templateUrl: 'page.html',
restrict: 'E',
compile: function compile(element, attrs, transclude) {
// does nothing currently
return {
pre: function preLink(scope, element, attrs, controller) {
// does nothing currently
},
post: function postLink(scope, element, attrs, controller) {
// does nothing currently
}
}
}
};
});페이지 지시문 템플릿 (위의 templateUrl 속성의 "page.html")
<div ng-controller="PageCtrl" >
...
<!-- dynamic page content written into the div below -->
<div ng-bind-html-unsafe="pageContent" >
...
</div>페이지 컨트롤러
angular.module('myApp')
.controller('PageCtrl', function ($scope) {
$scope.pageContent = '';
$scope.$on( "receivedPageContent", function(event, args) {
console.log( 'new page content received after DB call' );
$scope.pageContent = args.htmlStrFromDB;
});
});작동합니다. 브라우저에서 DB의 페이지 HTML이 멋지게 렌더링되는 것을 볼 수 있습니다. 사용자가 다음 페이지로 넘어 가면 다음 페이지의 내용 등이 표시됩니다. 여태까지는 그런대로 잘됐다.
문제
여기서 문제는 페이지 내용 내에 대화 형 내용을 포함하려는 것입니다. 예를 들어, HTML은 사용자가 그것을 클릭 할 때 팝업 모달 창을 표시하는 것과 같은 멋진 작업을 수행하는 축소판 이미지를 포함 할 수 있습니다. 데이터베이스의 HTML 문자열에 Angular 메소드 호출 (ng-click)을 배치했지만 물론 Angular는 HTML 문자열을 구문 분석하고 인식하여 컴파일하지 않는 한 메소드 호출이나 지시문을 인식하지 못합니다.
우리의 DB에서
1 페이지 내용 :
<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>2 페이지 내용 :
<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>Page 컨트롤러로 돌아가서 해당 $ scope 함수를 추가합니다 :
페이지 컨트롤러
$scope.doSomethingAwesome = function( id, action ) {
console.log( "Going to do " + action + " with "+ id );
}DB의 HTML 문자열 내에서 'doSomethingAwesome'메서드를 호출하는 방법을 알 수 없습니다. Angular는 어떻게 든 HTML 문자열을 구문 분석해야한다는 것을 알고 있지만 어떻게해야합니까? $ compile 서비스에 대한 모호한 내용을 읽었으며 몇 가지 예를 복사하여 붙여 넣었지만 아무 효과가 없습니다. 또한 대부분의 예는 지시문의 연결 단계 동안에 만 동적 내용이 설정되는 것을 보여줍니다. 우리는 Page가 앱 수명 동안 살아 있기를 원합니다. 사용자가 페이지를 넘길 때 지속적으로 새로운 컨텐츠를 수신, 컴파일 및 표시합니다.
추상적 인 의미에서, 우리는 Angular 앱 내에서 Angular 덩어리를 동적으로 중첩하려고 시도하고 있음을 말할 수 있다고 생각합니다.
나는 모든 종류의 블로그 게시물뿐만 아니라 다양한 각도의 Angular 문서를 여러 번 읽었으며 사람들의 코드로 JS Fiddled를 읽었습니다. 나는 Angular를 완전히 오해하는지, 아니면 단순한 것을 놓치고 있는지, 아니면 느리게인지 모르겠습니다. 어쨌든 조언을 사용할 수 있습니다.