Danilo Paone Danilo Paone - 1 year ago 86
AngularJS Question

AngularJS: ng-bind-html doesn't work with button tag

I am having problem to print out an input type button dynamically in a div "ng-bind-html".

HTML template:

<input type="button" value="Add" ng-click="add()">
<div ng-bind-html="snippet"></div>


$scope.add = function() {
$scope.snippet = "<input type='button' value='Test' ng-click='myFunc()'><b>Test 2</b>";

The tag input is removed and then I see just the "bold" text Test 2.


Answer Source

For some reason your html tag is mark as unsafe by angular js. If you sure that your snippet text is safe, you can $sce.trustAsHtml it before adding it to the $scope.snippet.

app.controller('yourCtrl', ['$scope', '$sce', function($scope, $sce){
    $scope.add = function(){
        var text = "<input type='button' value='Test'><b>Test 2</b>";

        // mark it as clean
        text = $sce.trustAsHtml(text);

        $scope.snippet = text;