Directive not being triggered

Question

I have my main.controller.js which has a simple json object within it.

$scope.sections = [
    {
        id: "landing",
        description: "<div><img pinch-zoom src='public/img/model.png'></div>"
    }
];

And in my view, I have an ng-repeat which loops through my $scope.sections.

<md-content>
    <div ng-repeat="section in sections">
        {{ section.description }}
    </div>
</md-content>

However when I'm outputting {{ section.description }} the directive attached to the img is not firing. It's almost as if it's being ignored. Here is the output -- my pinch-zoom is completely removed:

<img src='public/img/model.png'>

If I apply the directive to an image not within my ng-repeat, the directive fires just fine.

I tried the following within my ng-repeat, but to no avail.

<div ng-bind-html="section.description"></div>

use sanitize module of angular application. the image is not getting render becase of the html tag is getting ignored by angular — Aniruddha Das, Jan 17 '17 at 18:45
@AniruddhaDas just to clarify: the image is getting rendered, but not it's directive. So I see the image just fine, but the directive is not there. — Mike, Jan 17 '17 at 18:47
Ah that is an interpolation problem. You should pass the outputted description into the compilation of angular :) — Justus Romijn, Jan 17 '17 at 18:54
Ok, got this working by following [this answer](http://stackoverflow.com/questions/18157305/compiling-dynamic-html-strings-from-database) — Mike, Jan 17 '17 at 19:28

score 0 · Answer 1 · answered Jan 17 '17 at 18:53

use the $sanitize and $sce to clean the html

 <script>
     angular.module('sanitizeExample', ['ngSanitize'])
       .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
         $scope.snippet =
           '<p style="color:blue">an html\n' +
           '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
           'snippet</p>';
         $scope.deliberatelyTrustDangerousSnippet = function() {
           return $sce.trustAsHtml($scope.snippet);
         };
       }]);
 </script>

So this does include the directive name in the img tag html. But the directive still isn't firing. — Mike, Jan 17 '17 at 19:16

Directive not being triggered

1 Answers1