Angular: Compile

http://angularjs.org/

by samiraguiar

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div customers="true"></div>

JavaScript

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

myApp.directive('customers', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    template: '<div class="customers"></div>',
    controller: function ($scope, $element) {
      var customers = ['Customer1', 'Customer2', 'Customer3'];
      var customersMapped = customers.map(function (customer) {
        return '<span ng-click="clickCustomer($event)" data-customer="' + customer + '">' + customer + '</span>';
      });
      var text = customersMapped.join(', ');
      var content = angular.element(text);
      $compile(content)($scope);
      
      $element.append(content);

      $scope.clickCustomer = function (event) {
        console.log('Customer clicked', event);
      }
    }
  };
}]);