0

I have a directive that has a piece of custom HTML that I can pass in as a custom option. I would like to use ng-repeat inside the custom HTML, but it is not being displayed. Here is the code.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.local = {
    options: {
      columns: [{
        name: 'product_id',
        label: 'Product ID'
      }, {
        name: 'product_name',
        label: 'Name'
      }],
      getBody: function( col, i ) {
        return col.name == 'product_id' ? col.label : '<div class="dropdown product-status"><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Status<span class="caret"></span></button><span class="dropdown-arrow"></span><ul class="dropdown-menu"><li ng-repeat="one_status in dataset.status"><a class="status all" ng-click="dataset.updateStatus(one_status.status_id)" ng-bind="one_status.status_name"></a></li></ul></div>';
      }
    },
    dataset: {
      status: [{
        status_id: 1,
        status_name: 'first draft'
      }, {
        status_id: 2,
        status_name: 'in edit'
      }]
    }
  };
});
app.directive('test', function($sce) {
  var linkFunc = function(scope) {
    scope.getBody = function( col, index ) {
      return $sce.trustAsHtml( scope.options.getBody( col, index ) );
    };
  };

  return {
    link: linkFunc,
    scope: {
      options: '=',
      dataset: '='
    },
    templateUrl: 'test.html'
  };
});

http://plnkr.co/edit/mCynQWtQElTGfoLXZHqZ?p=preview

Angela
  • 1,064
  • 1
  • 11
  • 23

1 Answers1

0

you need to make sure $sce is in a part of your controller

check this out -- http://jsfiddle.net/3J25M/2/

.controller('ngBindHtmlCtrl', ['$scope','$sce', function ngBindHtmlCtrl($scope, $sce) ...etc

also, check this question out: AngularJS using $sce.trustAsHtml with ng-repeat

Community
  • 1
  • 1
sam_r
  • 53
  • 5