$sce.trustAsHtml 내에서 지시문 렌더링
여기에 Plunker를 포함시켰습니다. http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview
DOM에 버튼을 추가하려고 하는데 클릭하면 DOM에 바인딩된 기능이 실행됩니다.이 경우 "테스트"에 경고해야 합니다.코드는 여기 있습니다.
콘트롤러
app.controller('MainCtrl', function($scope, $sce) {
$scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');
$scope.testAlert = function () {
alert('testing')
};
});
HTML
<body ng-controller="MainCtrl">
<div ng-bind-html="trustedHtml"></div>
</body>
$sce.trustAsHtml그리고.ng-bind-html지시사항이 있는 HTML을 구축하기 위한 것이 아닙니다.이 기술은 사용할 수 없습니다.
이것은 각이 먼저 컴파일한 후 연결함으로써 작동하기 때문입니다.개념적 개요를 참고하여 설명을 잘 할 수 있습니다.
간단히 말해서, 당신이 당신의 컴퓨터에 정의된 HTML을 링크할 때까지.trustAsHtml, 각도가 컴파일하기에는 너무 늦었습니다(따라서 이해합니다).ng-click지시의
HTML을 동적으로 추가하기 위해서는 당신은$compile서비스(및/또는 지시)의사 선생님이 오셨습니다.
Angular 1.6.1의 경우, 저에게 적합한 솔루션을 찾았습니다.
템플릿:
<div ng-bind-html="trustAsHtml(content);" init-bind> </div>
컨트롤러에서:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
지시:
.directive('initBind', function($compile) {
return {
restrict: 'A',
link : function (scope, element, attr) {
attr.$observe('ngBindHtml',function(){
if(attr.ngBindHtml){
$compile(element[0].children)(scope);
}
})
}
};
})
언급URL : https://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml
'programing' 카테고리의 다른 글
| 문자열 내용에서 XML 리더 (0) | 2023.11.06 |
|---|---|
| NSA rray에 c-struct를 넣는 가장 좋은 방법은? (0) | 2023.11.06 |
| jQuery: 창 너비를 즉시 감지하는 방법은 무엇입니까? (0) | 2023.11.06 |
| 열 이름에 접두사 추가 (0) | 2023.11.06 |
| 이 너비 속성 값 선언에서 9의 의미는 무엇입니까? (0) | 2023.11.06 |