Как связать событие javascript и ng-click в элементе html с помощью угловых js?

Question

Я пытаюсь связать следующий json-ответ на моей странице html. 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> 

Controller код

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

НГ-связывать-HTML связывает HTML-тег, но он срывает с яваскриптом и нг щелкните событие. Я получаю только поддержку, когда я проверяю элемент, и ссылка не работает.

Пожалуйста, предложите мне решение.

Answer 1

Это происходит, поскольку угловой автоматически использует $ sce -> Строгое контекстное экранирование. он позволяет вам 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> 

Угловое Ресурс:

Строгое контекстная Экранирование (ГКП) представляет собой режим, в котором AngularJS требует привязок в определенных контекстах sult в значении, которое помечено как безопасным для использования в этом контексте. Одним из примеров такого контекста является привязка произвольного html, управляемого пользователем через ng-bind-html. Мы ссылаемся на эти контексты как привилегированные или контексты SCE.

Начиная с версии 1.2, Угловые суда с включенным 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, «Для получения дополнительной информации посетите сайт» и привяжите его.

{ 
     "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) перекомпилировать ваш dynamicaly добавил содержание

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

ПРИМЕЧАНИЕ: этап перекомпиляции на данный момент является ручным (нажмите перекомпилировать e). Следуйте за this, чтобы он работал хорошо.