Question

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

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

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

 $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功能优先。

现在，一旦你能够使你的链接工作，显示部分现在是一块蛋糕。您想要点击该链接内容显示在页面的右侧。您可以获取链接的内容并添加范围变量，如下所示：

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

希望它有效。快乐的编码!!!

Angular：ng-bind-html从Firebase

1 个答案: