Angular：ng-bind-html 从从 Firebase 获取的 HTML 数据中删除 ng 指令答案

【问题标题】：Angular: ng-bind-html removing ng directives from HTML data fetched from FirebaseAngular：ng-bind-html 从从 Firebase 获取的 HTML 数据中删除 ng 指令
【发布时间】：2016-02-23 08:12:18
【问题描述】：

我正在使用 angularJS 从 WYSIWYG 编辑器将数据保存在 firebase 中。此数据将采用 HTML 格式。

我正在从 firebase 获取 HTML 数据，并且在 angular 指令 ng-bind-html 的帮助下，此 HTML 内容被清理，保存在编辑器中的文本将显示给用户。此文本可能包含文本、图像、链接。

<div ng-bind-html="newHTML" ng-model="cleanText1"></div>

带有链接的数据的 HTML 格式如下：

<p>This is text editor <a href=\"http://someLink\">link</a><br></p>

现在，如果我单击页面上的此链接，它将重定向到指定的 URL。但我希望此链接在页面右侧的 div 中打开页面。为了防止这种行为，我使用以下代码将 href 替换为 ng-href：

$scope.newHtml=$scope.htmlcontent1.replace("href","ng-href");
$scope.newHTML=$sce.trustAsHTML($scope.newHtml);

这样做 ng-bind-html 删除了 ng-href <p>This is text editor <a>link</a><br></p> 这使它无法点击。

我还尝试为标签添加指令，这样一旦用户单击此链接，我就可以提供自己的功能，而不是重定向用户。

指令如下所示：

app.directive('a', function ($compile) {
  return {
    restrict: 'AE',
    link: function (scope, elem, attrs) {                                               
      var href = elem.children('a').attr('href');
      console.log("href"+href);
      elem.children('a').attr('href', null);
      elem.children('a').attr('ng-click', 'open()');
      $compile(elem.contents())(scope);
      console.log("elem"+elem.children('a').attr('href'));
      scope.open = function () {
        alert('1');
      }
    }
  }
})

但是一旦用户单击并被重定向到新页面，就会调用指令。任何想法如何使此链接在页面右侧打开？感谢您的帮助。

【问题讨论】：

如果将 Firebase 中的 HTML 替换为相同的硬编码 HTML，是否仍然存在相同的问题？如果是这样，您可以从等式中删除 Firebase 和 AngularFire。
@FrankvanPuffelen 感谢您的帮助，但恐怕我需要更多，我将 firebase 中的 HTML 替换为 somelink">Link</a> 但是 ng-bind-html 而呈现此 HTML 会将其转换为 Link 。ng-bind-html 正在过滤掉 angular 指令并仅保留 HTML。有没有办法阻止 ng-bind-html 过滤 angular 指令？

标签： angularjs firebase angularfire

【解决方案1】：

让我们对您的代码进行一些调整以使其生效。试试这个吧。

制作您自己的指令来清理 HTML 以代替使用 ng-bind-html。

替换

<div ng-bind-html="newHTML" ng-model="cleanText1"></div>

到

<div cleanHtml="newHTML" ng-model="cleanText1"></div>

cleanHTML 将是一个自定义指令。在 app.js 中创建以下指令以呈现 HTML 内容。

 app.directive('cleanHTML',['$compile',function ($compile) {
return function(scope, element, attrs) {

    scope.$watch(
      function(scope) {

        return scope.$eval(attrs.compile);
      },
      function(value) {
        console.log(value) 
        // Here you can see your HTML is going to get sanitized below
        element.html(value); 
        $compile(element.contents())(scope); // After this HTML will be sanitized.

      }
 )};
}])

接下来是抑制 href 的行为并在链接上应用点击功能，以便为链接定义自己的功能。现在替换这个：

 $scope.newHtml=$scope.htmlcontent1.replace("href","ng-href");
$scope.newHTML=$sce.trustAsHTML($scope.newHtml)

到

$scope.newHtml=$scope.htmlcontent1.replace
("<a ","<a ng-click=\"$event.preventDefault();open()\"");
$scope.open = function()
   {
      alert("Whoa! It worked :)");
      //Write your code here
   }

此替换将添加 ng-click 到链接。例如如果你的 HTML 是这样的

<a href="http://someLink">link</a>

会变成这个样子

<a ng-click="$event.preventDefault();open()" href="http://someLink">link</a>

已添加 $event.preventDefault() 以覆盖 href 功能，以便 ng-click 功能优先。

现在，一旦您能够使您的链接工作，然后显示部分现在就是小菜一碟。您希望单击该链接的内容出现在页面的右侧。您可以获取链接的内容并像这样添加范围变量：

 $scope.newHtml=$scope.htmlcontent1.replace("<a ","<a ng-click=\"$event.preventDefault();open()\"");
      $scope.open = function()
      {
         alert("Whoa! It worked :)");
        //Write your code here
        //fetch the content in var content
        $scope.linkContent= content;
      }

使用 linkContent 并将其添加到您要显示的 HTML 页面的 DIV 的右侧并完成 :)

<div>{{linkContent}}</div>

希望它有效。快乐编码！！！

【讨论】：