angularjs javascript ng-bind-html not working
Question
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 (ie "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.
1 answers
solution1
1 ACCPTED 2015-10-14 18:32:45
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) ;
}
}
]) ;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.