AngularJS Example

by edeustace

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<div ng-app="transclude">
  <div ng-controller="Ctrl">
      <markdown>
# Bar {{foo}} {{foo}}
# {{bing}}
      </markdown>
  </div>
</div>

JavaScript

function Ctrl($scope) {
  $scope.foo = 'Bar';
  $scope.bing = 'Bing';
}

angular.module('transclude', [])
 .directive('markdown', function() {
     
     var regex = /\{\{(.*?)\}\}/;
     
    var converter = new Showdown.converter();
     
    return {
      restrict: 'E',
      replace: true,
      scope: true,
      link: function (scope, element) {
          
          var processTemplate = function(text){
              var results = text.match(regex);
              if(!results){
                  return text;
              } else {
                  var value = scope.$eval(results[1]);
                  var replaceKey = new RegExp("{{" + results[1] + "}}","g" );
                  text = text.replace(replaceKey, value);
                  return processTemplate(text);
              }
          };
          var text = element.text();
          var processed = processTemplate(text);
          var markdownText = converter.makeHtml(processed);
          element.html(markdownText);
      }

    };
});