Question

我正在尝试在我的html页面中绑定以下json响应。 json如下：

{
"key":{
"text":"<p>For more information, please visit  <a href = \"javascript:void(0);\" ng-click = \"customizeWindow('http://www.google.com');\">Support</a> .</p>"
}
}

html页面

<div ng-bind-html="message"></div>

控制器代码

$http({
       method: 'GET',
       url:'DAYS.json'

     }).success(function(responsedata) {
        $scope.message=responsedata.key.text;
      }).error(function(responsedata){});

控制器内的

customizeWindow函数

$scope.customizeWindow = function(url) {
        window.open(url, "_blank", "toolbar=yes, scrollbars=yes, resizable=yes,top=70, left=190, width=970, height=460");
    }

ng-bind-html绑定html标签，但它剥离了javascript和ng-click事件。当我检查元素并且链接不起作用时，我只得到支持。

请建议我一个解决方案。

Answer 1

这是因为角度自动使用$ sce - ＆gt;严格的上下文转义。它允许你使用ng-bind-html但它不允许你添加像JS这样的恶意代码。你所追求的是明确地将该段视为HTML。

因此：

angular.module('app', ["ngSanitize"]) // You have to include ngSanitize or it wouldn't work.
.controller('Ctrl', function ($scope, $sce){

$scope.htmlData = <p>For more information, please visit  <a href = \"javascript:void(0);\" ng-click = \"customizeWindow('http://www.google.com');\">Support</a> .</p> //Took from your example.

$scope.$watch("htmlData", function(newValue){
$scope.trustedData = $sce.trustAsHtml(newValuew);
  });
});

HTML使用：

<p ng-bind-html="trustedData"></p>

角度资源：

严格上下文转义（SCE）是AngularJS所需的模式   在某些上下文中绑定以产生标记为的值   在这种情况下可以安全使用。这种背景的一个例子是约束力   由用户通过ng-bind-html控制的任意html。我们指的是   这些上下文是特权或SCE上下文。

从版本1.2开始，Angular默认启用了SCE。

请继续阅读：Angular on SCE - trustAsHtml method

Answer 2

ng-bind-html内容默认情况下已清理，并不意味着将DOM带入页面。您可以使用此方法将内容添加到页面上。例如，如果你有一个富文本编辑器 - 你想要提供html内容，但是当你使用ng-bind-html时，它会被清理掉。

出于您的目的，我建议使用模板或普通模型绑定。

你的json的来源，对于消费者方面（你的页面）实现/技术应该什么都不知道如果你离开angularJS并开始使用Knockout，你将不得不改变服务器端因为Knockout不知道ng-click。只需传回http://www.google.com等内容，＆＃39;有关详细信息，请访问＆＃39;并绑定它。

 {
        "key":{
        "textsource": { 
                              source :  'http://www.google.com',
                              message : 'For more information, please visit  ' 
                       }
        }
     }

    <p>{{textsource.message}}<div  ng-click="customizeWindow(textsource.source)\">Support</div> </p>

如果您无法更改服务器端，请查看此example：

1）告诉$ sce你的内容没问题

 $scope.message = $sce.trustAsHtml(json.key.text);

2）重新编译动态添加的内容

  $scope.init = function () {
            var el = document.getElementById("dynamic");
             $compile(el.childNodes[0])($scope);
        };

注意：重新编译步骤现在是手动的（按重新编译按钮）。关注this以使其正常运行。

如何使用angular js绑定html元素中的javascript和ng-click事件？

2 个答案: