각도: ng-bind-html 필터가 ng-click을 제외합니까?

각도: ng-bind-html 필터가 ng-click을 제외합니까?

json 파일에서 로드하는 html 데이터가 있습니다.

앱에서 ngSanitize를 사용하고 ng-bind-html을 사용하여 이 html 데이터를 표시하고 있습니다.

이제 json blob의 모든 링크를 표준에서 변환하고 싶습니다.

• <a href="some_link">link</a>

대상:

• <a ng-click="GotoLink('some_link','_system')">link</a>.

그래서 링크를 변환하기 위해 json 파일에 regExp를 하고 있는데, 어떤 이유로 ng-bind-html이 출력에서 ng-click을 걸러내고 있고, 그 이유를 알 수 없습니다.이렇게 해야 하나요?그럴 경우 이 동작을 비활성화할 수 있나요?

데모에 대해서는, 다음의 jsFiddle 를 봐 주세요.http://jsfiddle.net/7k8xJ/1/

좋은 생각 있어요?

네, 문제는 당신이 포함하는 HTML을 컴파일하지 않는다는 것입니다(Angular는 디렉티브 등을 찾기 위해 해석하지 않습니다).컨트롤러 내에서 컴파일할 수 있는 방법이 생각나지 않지만 콘텐츠를 포함하는 디렉티브를 생성하여 컴파일할 수 있습니다.

그래서 넌 변할거야

<p ng-bind-html="name"></p>

로.

<p compile="name"></p>

그리고 js의 경우:

var myApp = angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
.directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
   )};
  }]).controller('MyCtrl', function($scope) {
    var str = 'hello http://www.cnn.com';
    var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
    result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");
    $scope.GotoLink = function() { alert(); }
    $scope.name = result;
});

각도 1.2.12: http://jsfiddle.net/7k8xJ/4/

Angular 1.4.3: http://jsfiddle.net/5g6z58yy/ (기존과 같은 코드이지만 1.4에서는 동작하지 않는다고 하는 사람도 있습니다).*)

컴파일이 제 요구를 충족시키지 못했기 때문에, 저는 아직 컴파일에 대해 몇 가지 문제에 직면해 있었습니다.이 문제를 해결하기 위한 매우 쉽고 좋은 해킹이 있습니다.

ng-click은 onClick으로 대체됩니다.그런 다음 Javascript 함수를 작성하여 onClick 이벤트를 호출합니다.onClick 함수에서는 앵커 태그의 범위를 찾아 필요한 함수를 명시적으로 호출합니다.

그 방법은 다음과 같습니다.

예상보다 일찍,

<a id="myAnchor" ng-click="myControllerFunction()" href="something">

지금이다,

<a id="myAnchor" onClick="tempFunction()" href="something">

밑바닥이나 어딘가에서

<script>
function tempFunction() {
 var scope = angular.element(document.getElementById('myAnchor')).scope();
  scope.$apply(function() {
    scope.myControllerFunction();
 });
}
</script>

이제 작동해야 합니다.누군가에게 도움이 되길 바랍니다:)

상세한 것에 대하여는, 여기를 참조해 주세요.

HTML을 통한 명시적 신뢰$sceAngular가 모델 데이터를 질문 없이 HTML로 렌더링하려면$sce필요한 것은 서비스입니다. $sce는 Strict Contextual Escape 서비스입니다.HTML 문자열을 Angular의 나머지 부분에 HTML이 어디에서나 렌더링할 수 있음을 나타내는 오브젝트로 랩할 수 있는 서비스의 화려한 이름입니다.

다음 버전의 컨트롤러에서는 코드에는$sce서비스를 사용하여 링크 배열을 신뢰할 수 있는HTML 객체의 배열로 변환합니다.$sce.trustAsHtml.

app.controller('XYZController', function ($scope, $sce) {

$sce.trustAsHtml("<table><tr><td><a onclick='DeleteTaskType();' href='#workplan'>Delete</a></td></tr></table>");

언급URL : https://stackoverflow.com/questions/22737927/angular-ng-bind-html-filters-out-ng-click