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

Question

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

我正在从 firebase 获取 HTML 数据，并借助 angular 指令 ng-bind-html 此 HTML 内容已清理，文本已保存在编辑器将显示给用户。此文本可以包含文本、图像、links.

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

带有link的数据的HTML格式如下：

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

现在，如果我在页面上单击此 link，它将重定向到 URL specified.But 我希望此 link 在 [=42] 中打开页面=] 位于页面右侧。为了防止这种行为，我使用以下代码将 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> 这使得它无法点击。

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

指令看起来像这样：

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');
      }
    }
  }
})

但是一旦用户点击并被重定向到新页面，就会调用指令。有什么想法可以让 link 在页面右侧打开吗？感谢您的帮助。

Answer 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 的行为并在 link 上应用点击功能，以便为 link 定义您自己的功能。现在替换这个：

 $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 添加到 Link。例如如果你的HTML是这样的

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

会变成这样

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

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

现在，一旦您能够使 link 正常工作，接下来就是显示部分，这现在是小菜一碟。您希望在单击 link 内容时出现在页面的右侧。您可以获取 link 的内容并添加范围变量，如下所示：

 $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;
      }

使用link内容并将其添加到HTML页面的DIV的右侧您想要显示的地方就完成了:)

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

希望有用。快乐编码!!!

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

Angular: ng-bind-html removing ng directives from HTML data fetched from Firebase

angularjs

firebase

angularfire