Question

我正在尝试制作一个动态页面，其内容可以更改，而无法定义模板（理论上，可以有无限模板）。

以下是我正在测试的代码：

<!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”）时，我在控制台中看到没有错误并且调用了这些功能，但页面中没有任何内容。此外，如示例所示，生成的代码包括在渲染完成时需要可操作的按钮。任何线索为何它不起作用？

感谢。

Answer 1

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

    }

} 

]) ;

angularjs javascript ng-bind-html无效

1 个答案: