1

Here I add some sample example. Its directly binding like

enter image description here

But I need to bind as HTML elements based on the data it need to work. It needs to work like in this example image below. Please help on this.

enter image description here

'use strict';
var app = angular.module('MyApp', []);


app.directive('sample', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      array: '='
    },
    template: '<ul ng-repeat="arr in array" title={{arr.title}}><div>{{arr.Description}}</div></ul>',
    
    link: function(scope) {

    }

  };
})

app.controller('SampleCtrl', ['$scope',
  function($scope) {

    $scope.array = [{
      "title": "0",
      "Description": "<h1>Zero</h1>"
    }, {
      "title": "1",
      "Description": "<h2>First</h2>"
    }, {
      "title": 2,
      "Description": "<h3>Second</h3>"
    }, {
      "title": 3,
      "Description": "<h4>Third</h4>"
    }, {
      "title": 4,
      "Description": "<h5>Fourth</h5>"
    }, {
      "title": 5,
      "Description": "<h6>Fifth</h6>"
    }];

  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="SampleCtrl">
    <sample array=array></sample>
  </div>
</div>
Harry
  • 87,580
  • 25
  • 202
  • 214
Suresh B
  • 1,658
  • 1
  • 17
  • 35
  • 1
    Please don't edit the code in question based on the answers provided. It is not correct as it makes your question invalid (with the changes applied, the code produces the output you wanted and not the one you didn't want). I have removed it and put the original code back in (and also made other minor edits). – Harry Dec 22 '15 at 11:48

2 Answers2

1

You need to create a filter as described here by @leeroy-brun so the HTML is marked as trusted.

app.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

And then you can change the template of your directive to use the ng-bind-html attribute.

template: '<ul ng-repeat="arr in array" title={{arr.title}} ng-bind-html="arr.Description | to_trusted"></ul>'

Cheers, Pablo.

Community
  • 1
  • 1
Puigcerber
  • 9,814
  • 6
  • 40
  • 51
0

try this in your template:

<div ng-bind-html="arr.Description"></div>
M21B8
  • 1,867
  • 10
  • 20