angularjs javascript ng-bind-html does not working

我正在尝试生成一个动态页面，其中的内容可以在没有定义模板的可能性的情况下进行更改（理论上可以有无限模板）。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”）我在控制台中看到没有错误并且调用了函数，但页面中没有提供任何内容。此外，如示例中所示，生成的代码包括一个按钮，该按钮在呈现完成时需要可操作。任何线索为什么它不工作？

谢谢。

来源

2015-10-14 FDavidov

您用来绑定处理程序的方法不正确。使用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) ; 

    } 

} 

]) ;

来源

2015-10-14 18:32:45 tcooc

感谢的快速反应和解决方案。事实上，事情在建议的变化之后起作用。不过，我提交的代码是我需要的一个非常简单的例子。在我的真实情况下，我正在构建表格。我的问题是，我无法达到点击某行会触发事件的点（所以我可以对选定的行进行操作）。无论如何，我很乐意为您的答案投票。谢谢！！！！！ – FDavidov

再次您好@tcooc。我在我的真实应用程序中尝试了解决方案，但仍然无法正常工作。与上面的示例的主要区别在于我也使用bootstrap。您是否知道可能阻止页面更新的任何兼容性问题（AngularJS和Bootstrap）？再次感谢。 – FDavidov

angularjs javascript ng-bind-html does not working

回答

相关问题