Angular: Directive - Link & Compile 2 (ng-bind-html)

http://mikeski.net

by Mike Baranski

HTML

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<div class="main-div">
  <div ng-controller="MyCtrl">
    Hello, {{name}}!
    <p list="osList" hello-directive></p>
  </div>
</div>

CSS

.main-div {
  margin: 2em;
  margin-top: 2em;
}

.compiled-element {
  color: red;
}

ul {
  list-style-type: disc;
  color: green;
}

JavaScript

/**
 * Shows how to modify the original element in compile
 * to add a class to the DOM.
 */
var myApp = angular.module('myApp', []);

var HelloDirective = function($sce) {
    return {
      scope: {
        list: "="
      }, // use a new isolated scope
      restrict: 'AE',
      replace: false,
      template: '<h3 ng-bind-html="list"></h3>',
      compile: function(tElem, attrs) {
				
        var ul = document.createElement("ul");
        var li = document.createElement("li")
        li.innerHTML = "<span ng-bind-html='list'></span>";
        ul.appendChild(li);

        var baseElem = tElem[0];
        baseElem.className ? baseElem.className += " compiled-element" : baseElem.className = "compiled-element";
        baseElem.appendChild(ul);
        console.log(tElem);

        return function(scope, elem, attrs) {
          scope.list = $sce.trustAsHtml("<i>Link function value, too</i>");
          console.log(scope.list);
        }
      }
    };
  }
  /**
  var p = document.createElement("p");
        p.innerHTML = "asdddf";
        var ul = document.createElement("ul");
        var li = document.createElement("li")
        li.innerHTML = "List Item";
        ul.appendChild(li);
        elem.append(p);
        elem.append(ul);
   */
myApp.directive("helloDirective", HelloDirective);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Angular Directive';
  $scope.osList = "Original value";
});