Angular directive which permits re-use for content referring to scope variables.

include-directive.js

'use strict';

/**
 * An ng-include replacement which transparently inherits the parent scope and also allows local customisation of variables
 * within the snippet.
 *
 * Designed to use $templateCache (in production) and fallback to an AJAX request (for dev-mode) to load view templates.
 * 
 * Use as below (can customise variables used in the snippet via ng-init):
 * <div include="'users/_password_confirmation_input.html'" ng-init="placeholder = 'Re-enter Password'"></div>
 * 
 */

angular.module('yourapp').directive('include', function($http, $templateCache, $compile) {
  return {
    scope: true,
    priority: 450, // overrides ng-include's scope priority
    restrict: 'EA',
    replace: true,
    link: function(scope, el, attr) {

      var templatePath = attr.include;

      var buildTemplate = function(template) {
        var contents = el.html(template).contents();
        $compile(contents)(scope);
      };

      templatePath = templatePath.substring(1, templatePath.length - 1); // trim angularjs quotes off string
      var template = $templateCache.get(templatePath);

      if (template) {
        buildTemplate(template);
        return;
      }

      $http.get(templatePath, {}).success(function(template) {
        $templateCache.put(templatePath, template);
        buildTemplate(template);
      });
    }
  };
});