ng-click이 수동으로로드 된 HTML에서 작동하지 않습니다.

Question

로드하려는 페이지 컨텐츠가 포함 된 JSON 파일이 있습니다. 그것에서는,이처럼 보이는 링크가 :

<a data-ng-click='foo()'>Bar</a> 

나는 HTML로 페이지에 페이지의 콘텐츠를로드 할 때 :

<p class="body" ng-bind-html="jsonText | raw"></p> 

이 필터 사용 :

app.filter('raw', function ($sce) { 
    return function (input) { 
     return $sce.trustAsHtml(input); 
    } 
}); 

을 링크를 클릭하면 foo() 통화가 시작되지 않습니다. 내가하려고하는 것이 불가능하거나 내가 잘못하고있는 것입니까?

Answer 1

로 주입하기 전에 $ 컴파일 서비스를 사용하여 템플릿을 컴파일해야하고 그것을 위해 당신은 $scope이 필요합니다. 그래서, 당신이 중 하나를 수동으로 $compile 그것을 필요하고 $scope에서 자신을 결과를 넣어, 또는 만들 지시어를 대신 필터의 : ngBindHtml 대신

.directive('dynamicHtml', ['$compile', function ($compile) { 
    return { 
     link: function ($scope, $element, $attrs) { 
      $scope.$watch($attrs.dynamicHtml, function (html) { 
       $element.empty().append($compile(html)($scope)); 
      }); 
     } 
    }; 
}]); 

및 사용 :

<p dynamic-html="jsonText"></p> 

것은 그냥 알고 HTML을 직접 컴파일하면 contextual escaping을 완전히 우회하므로 자신의 안전한 콘텐츠로 만 수행해야합니다.

Answer 2

문제는 DOM에 일반 텍스트를 추가하는 것입니다. 필터는 ng-click 지시문을 포함하는 html 텍스트를 광고 할 뿐이며 브라우저와 관련하여 이해할 수없는 속성입니다. 당신이로드 된 HTML을 $compile해야하기 때문에

당신은 좋은 생각이 아니다이를 위해 필터를 사용하여 DOM