preinterpolate

$interpolate with different symbols. This allows one to interpolate to build the template to be interpolated.

by Evan Sharp

HTML

<div ng-app="myApp" ng-init="something = 'SoMeThInG'; other = 'what?'; somethingMore = 'ORLY?'">
{{1+1}} {{something}} %%1+1%%
<div data-do-something>
this gets replaced
</div>
</div>

JavaScript

var raw = '<div %%something | lowercase%%>{{other}} %%2+2%% %%something | lowercase%% {{%%somethingElse%%}} %%expression%% plainness</div>';
angular.module('myApp',['something']);

angular.module('something',[])
	.factory('preinterpolate', function($interpolate){
    var startSymbol = $interpolate.startSymbol();
    var endSymbol = $interpolate.endSymbol();
    var escapedStart = startSymbol.replace(/(.)/g, '\\$1');
    var replaceWrap = startSymbol+'$1'+endSymbol;
    
  	return preinterpolate;
    
    function preinterpolate (str, start, end) {
    	if (!start) start = '%%';
    	if (!end) end = start;
    	var symbolRegex = new RegExp(start+'(.*?)'+end, 'g');
    	var _str = str;
      _str = _str.split(startSymbol).join(escapedStart + ' ')
      	.replace(symbolRegex, replaceWrap);
      var expression = $interpolate(_str);
      return function (context) {
      	return expression(context).split(escapedStart).join(startSymbol);
      }
    }
  })
  .directive('doSomething', function($compile,preinterpolate){
  	return {
      link: function(scope, elem, attr){
      	var expression = preinterpolate(raw);
      	var html = expression({something:'AsDfVgHn!!!', somethingElse: 'something', expression: '{{something}} {{somethingMore}} <strong>WHAT?!</strong>'});
        console.log(html);
        elem.html(html);
        $compile(elem.contents())(scope)
      }
    }
  });