要輸出一個包含html格式效果的文字就是字串

眾所周知，就是要通過ng-bind-html來進行資料繫結

<small class="block m-t-sm img-full" data-ng-bind-html="vm.contentdetial.content" ></small>

首先一個簡單的例子輸出字串“hello<br>angularJS”

我們期待的結果是：

hello

angularJS

如果只是普通的使用{{}}進行資料繫結，顯然無法識別轉義html，輸出結果即為：

hello<br>angularJS

字串內容。

現在已經瞭解ng-bind-html的效果了，那麼現在升級一步，我們給字串中的html標籤加入樣式。（原諒我找了一個看起來很複雜的例子。。。）

<section style="border: 0px; margin: 0.8em 0px 0.5em; box-sizing: border-box; padding: 0px;" class="tn-Powered-by-XIUMI"><span style="display: inline-block; padding: 0.3em 0.5em; border-radius: 0.5em; color: rgb(255, 255, 255); font-size: 1em; box-shadow: rgb(165, 165, 165) 0.2em 0.2em 0.1em; font-family: inherit; text-decoration: inherit; border-color: rgb(249, 110, 87); box-sizing: border-box; background-color: rgb(249, 110, 87);" class="tn-Powered-by-XIUMI"><section class="tn-Powered-by-XIUMI" style="box-sizing: border-box;">請輸入標題</section></span><section style="width: 0px; height: 0px; clear: both;"></section></section>

請輸入標題

而使用ng-bind-html顯示的結果那就~~~~

請輸入標題

你沒有看錯，竟然只顯示出了文字，沒有樣式，審查元素看看是什麼情況

<section class="tn-Powered-by-XIUMI"><span class="tn-Powered-by-XIUMI"><section class="tn-Powered-by-XIUMI">請輸入標題</section></span><section></section></section>

問題顯而易見了，所有的style被過濾了，或者說是忽略了，沒有展示出來。那麼現在就要解決這個問題了。

我就展示我公司專案的程式碼了，在頁面相應的controller.js中使用$sce.trustAsHtml()

(function () {

    var injectParams = ['$scope', '$location', '$routeParams',
                        '$timeout', 'config', 'dataService','toaster','$sce' ];

    var ContentController = function ($scope, $location, $routeParams,
                                           $timeout, config, dataService,toaster,$sce) {
        var vm = this,
            contentId = ($routeParams.contentId) ? parseInt($routeParams.contentId) : 0,
            timer,
            onRouteChangeOff;
        vm.contentdetial = {};
        
        function getContent() {
            dataService.getContent(contentId)
            .then(function (data) {
            vm.contentdetial = data;
            vm.contentdetial.content = $sce.trustAsHtml(data.content);

                $timeout(function () {
                }, 1000);
            }, function (error) {
                toaster.pop('warning', "處理失敗", "很遺憾處理失敗，由於網路原因無法連線到伺服器！");
            });
        }
        
        function init() {
        getContent();
        }
        init();
    };

    ContentController.$inject = injectParams;
    angular.module('serviceApp').controller('ContentController', ContentController);
   
}());

解決方法就是在controller中給資料也就是要顯示的內容字串使用$sce.trustAsHtml()

vm.contentdetial.content = $sce.trustAsHtml(data.content);

data.content就是帶html格式的字串。

這樣就可以顯示出所需要的樣式了。