Loading ng-include partial cache templates from preloaded (JST)

Question

I have my template preloaded into a javascript string array, for example var t = JST['firstTemplate'], where it twill look,

<div>This scope has a value of {{value}}</div>

How to use this preloaded template in the directive ng-include?

Please note that my template in this scenario can be more complex, with possible nested representation and templates and their own nested areas and controllers. So, I'm not sure if any of the ng-bind directives helped?

UPDATE:

Looking at the source ng-include, it seems like a good way to do this would be to untie the logic of loading the template into a custom provider.

Current default download mechanism simply performs $http.getwith $templateCacheas a provider cache. It looks like I can add the contents of a template to the template JST['firstTemplate']cache, but I would have to do this at startup time for each template.

$templateCache.put('firstTemplate', JST['firstTemplate']);

and then,

<div ng-include="firstTemplate"></div>

I could also write a custom directive that goes side by side with every ng-include that somehow does this pre-caching of templates. This again seems awkward.

UPDATE # 2

I'm going to try to override templateCache so that it uses my already preloaded JST hash. The result will be published if this is done.

Answer 1

, , , (:-) , $templateCache.get, $assist.decorator, . .

angular.module('app').config([
  '$provide', 
  function($provide) {
    $provide.decorator('$templateCache', function($delegate, $sniffer) {
      var originalGet = $delegate.get;

      $delegate.get = function(key) {
        var value;
        value = originalGet(key);
        if (!value) {
          // JST is where my partials and other templates are stored
          // If not already found in the cache, look there...
          value = JST[key]();
          if (value) {
            $delegate.put(key, value);
          }
        }
        return value;
      };

      return $delegate;
    });

    return this;
  }
]);

, JST, rails angular. JST , .

angular.

Answer 2

ng-include ng-bind-html:

<div ng-bind-html="t"></div>

$scope:

$scope.t = JST['firstTemplate'];

ngSanitize ( angular-sanitize.js ):

angular.module('app', ['ngSanitize']);

Answer 3

Today I faced the same problem, here is my solution:

A custom directive that returns the server / info JST as a template:

/* jstTemplate.js */

/**
 * @desc template loader for JST templates
 * @example <div jst-template="server/info.html"></div>
 */


angular
    .module('myApp')
    .directive('jstTemplate', jstTemplate);

function jstTemplate() {
    return {
        restrict: 'A',
        template: function(element, attrs) {
            return JST[attrs.jstTemplate]();
        }
    }
};

Using:

<div class="box">
    <div jst-template="server/info.html"></div>
</div>

attrs.jstTemplate contains the value specified in the directive.

Cheers, Niklas