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

Question

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>

Controller:

$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.

Thanks

score 13 · Accepted Answer · answered Mar 30 '14 at 13:19

13

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;
    };
}]);

answered Mar 30 '14 at 13:19

Iqbal Fauzi

1,561
11
12

It worked but the ng-click in the input button added doesn't work. Thanks – Danilo Paone Mar 30 '14 at 13:51
2

You're welcome. Suddenly there's `ng-click`? Now, use `$compile`, Thanks. – Iqbal Fauzi Mar 30 '14 at 14:38
1

Iqbal Fauzi, would you please explain how to use $complie in this scenario, I tried and not able to understand – Santosh Jul 21 '15 at 14:20
me 2... I was unable to use compile... it either generated an object unusable by ng-bind-html or i came back to square one and lost the ng-click – ionescho Nov 12 '15 at 13:16

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

1 Answers1

Linked