angular bind html tags from controller to html view

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> 

Я ищу через Интернет в течение нескольких дней и до сих пор could't найти способ, чтобы выяснить это. пожалуйста помогите. Спасибо.

Answer 1

Вы должны сделать 2 вещи.

1. Использование данных нг-связывать-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);