我正在尝试生成一个动态页面，其中内容可以更改，而无需定义模板(理论上，可以有无限个模板)。
这是我正在测试的代码:
<!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>
和 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) ;
}
}
]) ;
当单击两个按钮中的任何一个(即“设置 HTML 1”或“设置 HTML 2”)时，我在控制台中看到没有错误并且调用了函数，但页面中没有显示任何内容。 此外，如示例所示，生成的代码包括一个需要在渲染完成时操作的按钮。 知道为什么它不起作用吗？
谢谢。
最佳答案
您用于绑定(bind)处理程序的方法不正确。使用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>
还有
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) ;
}
}
]) ;
关于javascript - angularjs javascript ng-bind-html 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33132969/