Can AngularJS directive pick up class name from dynamic content?


In above case, I'm expecting elements with cls class be picked up with same behavior from within ng-repeat (ng-bind-html-unsafe), and explicitly set one.

<div ng-app="appp">
  <div ng-controller="Ctrl">
      <li ng-repeat="r in data" ng-bind-html-unsafe="r.alink"></li>
    <div class="cls">External</div>

function Ctrl($scope) {
    $ = [
        {alink: '<span><a class="cls">One</a></span>'},
        {alink: '<span><a class="cls">Two</a></span>'}

angular.module('appp', [])
.directive('cls', function() {
    return {
        restrict: 'C',
        replace: true,
        scope: true,
        link: function(scope, element, attrs) {
            element.bind('click', function() {

I'm wondering what do I do wrong here?

Problem courtesy of: simonxy


The problem is that the new HTML is not being compiled by Angular. The simplest solution may be to manually compile the dynamic content using the $compile service. Do this in a custom directive and replace ng-bind-html-unsafe="r.alink" with something like htmlinsert="r.alink". Here is how that directive could be coded:

angular.module('appp', [])
    return {
        scope: {
            htmlinsert: '='    
        link: function(scope,element,attrs){
            var compiledElement = $compile(scope.htmlinsert)(scope);

The reference to the html string is passed using isolate scope binding, and is then compiled before being appended to the current iteration of the repeated DOM element.


Solution courtesy of: sh0ber


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.