AngularJS 템플릿으로 HTML을 렌더링하는 방법
이것은 내 템플릿입니다.
<div class="span12">
<ng:view></ng:view>
</div>
그리고 이것은 내 뷰 템플릿입니다.
<h1>{{stuff.title}}</h1>
{{stuff.content}}
나는 contentas html을 얻고 있고 그것을보기에 표시하고 싶지만 내가 얻는 것은 원시 HTML 코드뿐입니다. HTML을 어떻게 렌더링 할 수 있습니까?
사용하다-
<span ng-bind-html="myContent"></span>
당신은 그것을 벗어나지 않도록 angular에게 말할 필요가 있습니다.
이를 위해 사용자 지정 필터를 사용합니다.
내 앱에서 :
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>
Angular 문서를 따르고 $ sce를 사용합니다. $ sce는 AngularJS에 Strict Contextual Escaping 서비스를 제공하는 서비스입니다. 다음은 문서입니다. 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);
})
}
}
});
각도 4+에서는 innerHTML대신 속성을 사용할 수 있습니다 ng-bind-html.
In my case, it's working and I am using angular 5.
<div class="chart-body" [innerHTML]="htmlContent"></div>
In.ts file
let htmlContent = 'This is the `<b>Bold</b>` text.';
So maybe you want to have this in your index.html to load the library, script, and initialize the app with a view:
<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>
Then yourView.html could just be:
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js could have your controller with data $scope'd to it.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
Lastly, you'll have to config routes and assign the controller to view for it's $scope (i.e. your data object)
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
I haven't tested this, sorry if there's a bug but I think this is the Angularish way to get data
참고URL : https://stackoverflow.com/questions/15754515/how-to-render-html-with-angularjs-templates
'developer tip' 카테고리의 다른 글
| 개발을 동기화 상태로 유지하기 위해 git-bundle을 사용하는 방법은 무엇입니까? (0) | 2020.11.11 |
|---|---|
| Dalvik 및 Android 툴체인에서 어떤 최적화를 기대할 수 있습니까? (0) | 2020.11.11 |
| 라 라벨이 정말 이렇게 느린가요? (0) | 2020.11.10 |
| Android Studio에서 모듈 이름을 바꾸시겠습니까? (0) | 2020.11.10 |
| 컬렉션에서 목록으로 가장 빠르게 변환 (0) | 2020.11.10 |