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

回答

相關問題