Question

我需要將$scope.htmlView標籤呈現到html視圖中。

我已經嘗試過使用ng-bind-html。它呈現html標籤，但範圍變量值不會出現。

如何渲染html標籤和範圍變量值？

這是控制器：

$scope.newObj = { 
    billStatus : true; 
    eventTime : "2015-01-10" 
}; 

$scope.htmlView = '<p>{{newObj.eventTime}}</p> <div style="margin-top: -15px;"><md-checkbox ng-checked="{{newObj.billStatus}}" style="margin-left: 0px;" aria-label="Bilable"><span style="margin-left:0px;">Bilable</span> </md-checkbox></div>' 

預期的結果是：

<p> 2015-01-10</p> 
<div style="margin-top: -15px;"> 
    <md-checkbox ng-checked="true" style="margin-left: 0px;" aria- label="Bilable"> 
    <span style="margin-left:0px;">Bilable</span> 
    </md-checkbox> 
</div> 

我搜索在互聯網上數天，仍然便無法找出一個辦法弄清楚這一點。請幫幫我。謝謝。

Answer 1

你必須做2件事。

1. 使用數據-NG綁定，HTML = 「」
2. 使用$ sce.trustAsHtml（串）

更新： 如果你不會使用角度表達式，你必須編譯它們使用

$compile。

你可以通過閱讀這$SCE

Answer 2

更多，我會告訴你一個很長的路要走，但它會幫助you.Make這樣一個自定義的指令。

app.directive('dynamic', function ($compile) { 
return { 
restrict: 'A', 
replace: true, 
link: function (scope, ele, attrs) { 
    scope.$watch(attrs.dynamic, function(html) { 
    ele.html(html); 
    $compile(ele.contents())(scope); 
    }); 
    } 
    }; 
    }); 

用作

<span dynamic="{{htmlView}}" > 

Answer 3

你好請檢查此琴 https://plnkr.co/edit/iqNltdDYv2n9Agke0C2C?p=preview

HTML

<div ng-controller="ExampleController"> 
     <p >{{newObj.eventTime}}</p> 
     <p dynamic="htmlView"></p> 
</div 

和JS

(function(angular) { 
    'use strict'; 
angular.module('bindHtmlExample', ['ngSanitize']) 
    .controller('ExampleController', ['$scope', function($scope) { 

     $scope.newObj = { 
     billStatus : true, 
     eventTime : "2015-01-10" 
} 

$scope.htmlView = '<p> {{newObj.eventTime}}</p> <div style="margin-top: -15px;">Hello <md-checkbox ng-checked="{{newObj.billStatus}}" style="margin-left: 0px;" aria-label="Bilable"><span style="margin-left:0px;">Bilable</span> </md-checkbox></div>' 
    }]) 

    .directive('dynamic', function($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.dynamic, function(html) { 
       element[0].innerHTML = html; 
       $compile(element.contents())(scope); 
      }); 
     } 
    }; 
}); 
})(window.angular);