Angular directives in $http response

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?

You have a ng-click inside your row.Text and this does not work? — Eigi
– Eigi, Commented Feb 23, 2016 at 6:36

Suresh B · Accepted Answer · 2016-02-23 06:43:40Z

3

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

answered Feb 23, 2016 at 6:43

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ian Vink · Accepted Answer · 2016-02-23 23:26:33Z

1

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>

answered Feb 23, 2016 at 23:26

Ian Vink

69.1k109 gold badges354 silver badges567 bronze badges

1 Comment

Ed Sinek Over a year ago

I had the same issue. Here is a codepen with my solution. codepen.io/edsinek/pen/zqQQNx

Collectives™ on Stack Overflow

Angular directives in $http response

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related