0
我正在尝试生成一个动态页面,其中的内容可以在没有定义模板的可能性的情况下进行更改(理论上可以有无限模板)。angularjs javascript ng-bind-html does not working
下面是代码我测试:
<!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>
和控制器:
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) ;
}
}
]) ;
当任意两个按钮的点击(即 “设置HTML 1”或“设置HTML 2”)我在控制台中看到没有错误并且调用了函数,但页面中没有提供任何内容。此外,如示例中所示,生成的代码包括一个按钮,该按钮在呈现完成时需要可操作。 任何线索为什么它不工作?
谢谢。
感谢的快速反应和解决方案。事实上,事情在建议的变化之后起作用。不过,我提交的代码是我需要的一个非常简单的例子。在我的真实情况下,我正在构建表格。我的问题是,我无法达到点击某行会触发事件的点(所以我可以对选定的行进行操作)。无论如何,我很乐意为您的答案投票。谢谢!!!!! – FDavidov
再次您好@tcooc。我在我的真实应用程序中尝试了解决方案,但仍然无法正常工作。与上面的示例的主要区别在于我也使用bootstrap。您是否知道可能阻止页面更新的任何兼容性问题(AngularJS和Bootstrap)?再次感谢。 – FDavidov