Here’s my foo directive, simple enough.

<foo>  

It will use bar.html as the template when I specify so.

angular.module('mydirectives').directive('foo', function () {  
    return {
        templateUrl: 'bar.html',
        restrict: 'E',
        replace: true,
    }
});

But let’s say I want to use foo multiple times on a page and change what template each instance uses. This is achievable with an attribute, accessible with attr in the linking function, to name the template. We'll call it view in the markup.

For example:

<foo view="bar.html">  
<foo view="baz.html">  

Using $compile, $http, and the $templateCache, we can manually put together a template based on the view attribute.

Great! Except when you get this error: Error: Syntax error, unrecognized expression!

Turns out, this is related to a newline \n that jade puts atop the HTML after parsing it. Remedy the error by cutting out the \n like so:

angular.module('mydirectives').directive('foo', function ($templateCache, $compile, $http) {  
    return {
        restrict: 'E',
        replace: true,
        link: function postLink(scope, element, attrs) {
            $http.get(attrs.view, {cache: $templateCache}).success(function(html){
                //this is the fix - kill that newline that jade inserts as the first character
                if(html.substring(0, 1) === "\n") {
                    html = html.substring(1, html.length);
                }
                //end fix

                var el = angular.element(html);
                var compiled = $compile(el);
                element.append(el);
                compiled(scope);
            });
        }
    }
});