gpt4 book ai didi

javascript - angularjs javascript ng-bind-html 不工作

转载 作者:行者123 更新时间:2023-12-03 08:38:12 25 4
gpt4 key购买 nike

我正在尝试生成一个动态页面,其中内容可以更改,而无需定义模板(理论上,可以有无限个模板)。

这是我正在测试的代码:

<!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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com