CODEWITHSUNDEEP
javascripthtmlangularjs
FDavidov
FDavidov

Reputation: 3675

angularjs javascript ng-bind-html not working

I'm trying to produce a dynamic page where the contents can change without the possibility of defining templates (in theory, there can be infinite templates).

Here is the code I'm testing:

<!DOCTYPE html>
<html lang="en-us" ng-app="Test">
<head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="with=device-width initial-scale=1.0">
    <title> Single Page Web Application </title>
    <script src="Public_Libs/JQuery/jquery.js"></script>

    <script src="Public_Libs/Angular/angular.min.js"></script>
    <script src="Public_Libs/Angular/angular-route.min.js"></script>

    <script src="Test.js"></script>

</head>

<body ng-controller="TestController">

    <button onClick="Set_HTML_1()">Set HTML 1</Button>
    <button onClick="Set_HTML_2()">Set HTML 2</Button>
    <br>
    After this line comes the dynamic HTML...
    <br>
    <div ng-bind-html="This_HTML_Text">
    </div>
    <br>
    Above this line comes the dynamic HTML...

</body>

and the controller:

var Test = angular.module( 'Test', ['ngRoute']) ;

Test.controller('TestController' , ['$scope' , '$log' , '$location' , '$sce' , 
                                    function( $scope , $log , $location , $sce) {

    console.log("In controller TestController");


    Set_HTML_1 = function () {

        var dummy = "<h1> This is the header when clicking on second buton </h1><br>" + 
                    "<button onClick=\"alert('Hi from 1');\">Click me</Button>" ;

        console.log("Deploying " + dummy);

        $scope.This_HTML_Text = $sce.trustAsHtml(dummy) ;

    }

    Set_HTML_2 = function () {

        var dummy = "<h1> This is the header when clicking on second buton </h1><br>" + 
                    "<button onClick=\"alert('Hi from 2');\">Click me</Button>" ;

        console.log("Deploying " + dummy);

        $scope.This_HTML_Text = $sce.trustAsHtml(dummy) ;

    }

} 

]) ;

When clicking at any of the two buttons (i.e. "Set HTML 1" or "Set HTML 2") I see in the console that there are no errors and the functions are invoked, but nothing is presented within the page. Moreover, and as shown in the example, the generated code includes a button that needs to be operational upon rendering completion. Any clue why it is not working?

Thanks.

Upvotes: 0

Views: 136

Answers (1)

tcooc
tcooc

Reputation: 21199

The method you used to bind the handlers is incorrect. Use ng-click:

<!DOCTYPE html>
<html lang="en-us" ng-app="Test">
<head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="with=device-width initial-scale=1.0">
    <title> Single Page Web Application </title>
    <script src="Public_Libs/JQuery/jquery.js"></script>

    <script src="Public_Libs/Angular/angular.min.js"></script>
    <script src="Public_Libs/Angular/angular-route.min.js"></script>

    <script src="Test.js"></script>

</head>

<body ng-controller="TestController">

    <button ng-click="Set_HTML_1()">Set HTML 1</Button>
    <button ng-click="Set_HTML_2()">Set HTML 2</Button>
    <br>
    After this line comes the dynamic HTML...
    <br>
    <div ng-bind-html="This_HTML_Text">
    </div>
    <br>
    Above this line comes the dynamic HTML...

</body>

And

var Test = angular.module( 'Test', ['ngRoute']) ;

Test.controller('TestController' , ['$scope' , '$log' , '$location' , '$sce' , 
                                    function( $scope , $log , $location , $sce) {

    console.log("In controller TestController");


    $scope.Set_HTML_1 = function () {

        var dummy = "<h1> This is the header when clicking on second buton </h1><br>" + 
                    "<button onClick=\"alert('Hi from 1');\">Click me</Button>" ;

        console.log("Deploying " + dummy);

        $scope.This_HTML_Text = $sce.trustAsHtml(dummy) ;

    }

    $scope.Set_HTML_2 = function () {

        var dummy = "<h1> This is the header when clicking on second buton </h1><br>" + 
                    "<button onClick=\"alert('Hi from 2');\">Click me</Button>" ;

        console.log("Deploying " + dummy);

        $scope.This_HTML_Text = $sce.trustAsHtml(dummy) ;

    }

} 

]) ;

Upvotes: 1

Related Questions