각도 html을 렌더링하는 방법JS 템플릿
템플릿은 다음과 같습니다.
<div class="span12">
<ng:view></ng:view>
</div>
뷰 템플릿은 다음과 같습니다.
<h1>{{stuff.title}}</h1>
{{stuff.content}}
나는 그것을 얻을 것이다.contenthtml로 표시하여 뷰에 표시하고 싶은데, 취득하는 것은 raw html 코드뿐입니다.그 HTML은 어떻게 렌더링해야 하나요?
용도-
<span ng-bind-html="myContent"></span>
각도로 말해야 안 빠져요.
이를 위해 저는 커스텀필터를 사용합니다.
내 앱:
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
그런 다음 보기에서 다음을 수행합니다.
<h1>{{ stuff.title}}</h1>
<div ng-bind-html="stuff.content | rawHtml"></div>
각도 4+에서 사용할 수 있습니다.innerHTML대신 재산ng-bind-html.
저 같은 경우에는 잘 되고 있고 각도 5를 쓰고 있어요.
<div class="chart-body" [innerHTML]="htmlContent"></div>
In.ts 파일
let htmlContent = 'This is the `<b>Bold</b>` text.';
Angular 문서를 따라 $sce를 사용해야 합니다.$sce는 AngularJs에 Strict Contextual Escape 서비스를 제공하는 서비스입니다.다음은 문서입니다.http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Eventbrite 로그인 버튼을 비동기적으로 로드하는 예를 들어보겠습니다.
컨트롤러 내:
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
function($scope, $sce, eventbriteLogin) {
eventbriteLogin.fetchButton(function(data){
$scope.buttonLogin = $sce.trustAsHtml(data);
});
}]);
뷰에서 다음을 추가합니다.
<span ng-bind-html="buttonLogin"></span>
서비스 내용:
someAppServices.factory('eventbriteLogin', function($resource){
return {
fetchButton: function(callback){
Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
callback(widget_html);
})
}
}
});
예를 들어 index.html에 다음과 같은 내용을 입력하여 라이브러리를 로드하고 스크립트를 작성하고 보기를 사용하여 앱을 초기화합니다.
<html>
<body ng-app="yourApp">
<div class="span12">
<div ng-view=""></div>
</div>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
그러면 yourView.html은 다음과 같습니다.
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.controller에 데이터 $controll'd가 포함되어 있을 수 있습니다.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
마지막으로 루트를 설정하고 $scope(데이터 객체)를 표시할 컨트롤러를 할당해야 합니다.
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
아직 테스트하지 않았습니다. 버그가 있다면 죄송합니다.데이터를 얻기 위한 Angularish 방법이라고 생각합니다.
언급URL : https://stackoverflow.com/questions/15754515/how-to-render-html-with-angularjs-templates
'programing' 카테고리의 다른 글
| jq에서 해당 키의 키 및 값을 기준으로 json 파일을 정렬하는 방법 (0) | 2023.03.10 |
|---|---|
| 리액션 리덕스 내 성분과 용기의 차이 (0) | 2023.03.10 |
| 객체 위에 불변js를 사용해야 하는 이유는 무엇입니까?얼려? (0) | 2023.03.10 |
| JQuery Ajax가 POST 대신 GET을 전송합니다. (0) | 2023.03.10 |
| Wordpress: Ajax 호출로 플러그인 함수를 호출하는 방법 (0) | 2023.03.10 |