Không hiển thị định dạng html có thẻ style trong angular

Nếu ai đã làm web những có sử dụng định dạng html thì khi nạp ra giao diện sẽ không hiển thị được
Một số lỗi hay gặp để hiển thị html angular như sau:

1. Cách hiển thị nội dung từ biến ra html angular
2. Sửa lỗi không hiển thị được html ra thẻ angular
3. Sửa lỗi không hiển thị được css trong thuộc tinh style html angular

1. Cách hiển thị nội dung từ biến ra html angular

 $scope.noidung="Xin chào iif";

Hiển thị ra bằng cách thêm trong html là {{noidung}}   kết quả ra là Xin chào iif

Nhưng khi thay đổi

 $scope.noidung="<strong>Xin chào iif</strong>";

Ta viết trong html là {{noidung}} thì kết quả sẽ không đậm lên mà vẫn như cũ.

Để giải quyết vấn đề này ta thêm code angular như sau
 

2. Sửa lỗi không hiển thị được html ra thẻ angular

Code angular chưa xử lý định dạng html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

var app = angular.module("myApp");

app.controller('myCtrl', function($scope, $http,  $interval ){

 $scope.noidung="<strong>Xin chào iif</strong>";

});//start app.controller
 

Code angular đã xử lý định dạng html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
* Thêm sanitize

var app = angular.module("myApp",  ['ngSanitize']);

app.controller('myCtrl', function($scope, $http,  $interval,$sce ){

 $scope.noidung="<strong>Xin chào iif</strong>";

});//start app.controller
 

  Nhưng khi ta thêm thuộc tính style vào html thì lại không có hiệu ứng

3. Sửa lỗi không hiển thị được css trong thuộc tinh style html angular

var app = angular.module("myApp",  ['ngSanitize']);

app.controller('myCtrl', function($scope, $http,  $interval){

 $scope.noidung="<strong style='color:red;'>Xin chào iif</strong>";

});//start app.controller
 

Cách xử lý để html có style khi sử dụng angular

* Thêm $sce vào app.controlle

var app = angular.module("myApp",  ['ngSanitize']);

app.controller('myCtrl', function($scope, $http,  $interval,$sce ){

 $scope.noidung="<strong style='color:red;'>Xin chào iif</strong>";



   $scope.xulyHTML= function(x)

     {    

     x=$sce.trustAsHtml(x);

     return x;

     };

});//start app.controller