$ http响应中的Angular指令

Question

Angular 1.5

My $http data service returns html encoded text with directives too, like ng-click in the text.

I need to display the html and have the ng-click directives get activated.

To display I am doing this and it works, but ng-clicks don't work:

 <div class="mt10" ng-repeat="row in aqdas.Paragraphs" ng-cloak>
    <span  ng-bind-html="TrustDangerousSnippet(row.Text)" >
         {{row.Text}}
    </span>
</div>

Here is TrustDangerousSnippet:

    $scope.TrustDangerousSnippet = function (text) {
        var val = $sce.trustAsHtml(text);
        return val;
    };

How can I edit TrustDangerousSnippet so that the ng-click's in the text are turned on once $http downloads the code?

Answer 1

Use this Directive also with your code. to bind html element in directive use complie. it will work..

.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);
        }
    );
  };
}])

Answer 2

I added the Directive Suresh included and changed the HTML to look like this, it works now. (add 'compile' to the binding element)

<div class="mt10" ng-repeat="row in aqdas.Paragraphs" ng-cloak>
<span  compile ng-bind-html="TrustDangerousSnippet(row.Text)" >
     {{row.Text}}
</span>
</div>