Угловое: ng-bind-html удаление ng-директив из данных HTML, полученных из Firebase

Question

Я сохраняю данные в firebase из редактора WYSIWYG, используя angularJS. Эти данные будут в формате HTML.

Я извлекаю данные HTML из firebase и с помощью угловой директивы 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 specified.But Я хочу эту ссылку откройте страницу в div, которая находится в правой части страницы. Чтобы предотвратить такое поведение я заменил HREF с нг-HREF используя код ниже:

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

Выполнение этого нг-Bind-HTML удалены нг-HREF <p>This is text editor <a>link</a><br></p> Который сделал unclickable.

Также я попытался добавить директиву для тега, чтобы после того, как пользователь нажмет на эту ссылку, я могу дать свои собственные функции, а не перенаправлять пользователя.

Директива выглядит следующим образом:

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 
    } 

Эта замена добавит нг нажмите на ссылку. .если ваш HTML, как это

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

Он станет как этого

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

$ event.preventDefault() была добавлено, чтобы переопределить HREF функциональности, так что функциональность нг-щелчок имеет приоритет.

Теперь, после того, как вы сможете сделать свою работу рабочей, после этого появится часть дисплея, которая теперь является куском пирога. Вы хотите, чтобы по щелчку этого содержимого ссылки отображались в правой части страницы. Вы можете получить содержание ссылки и добавить в области видимости переменных, как это:

$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 и добавить его к правой стороне DIV в HTML страницы, на которой вы хотите отобразить, и это сделано :)

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

Надеюсь, он сработает. Счастливое кодирование !!!