Laden von ng-Partials aus dem lokalen vorinstallierten (JST) Vorlagencache einschließen

Question

Ich habe meine Vorlage in einem Javascript-String-Array vorinstalliert, wie z var t = JST['firstTemplate'], wo t wäre wie,

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

Wie kann ich diese vorinstallierte Vorlage in einem verwenden ng-include richtlinie?

Beachten Sie, dass meine Vorlage in diesem Szenario komplexer sein kann, mit möglichen verschachtelten Ansichten und Vorlagen sowie eigenen verschachtelten Bereichen und Controllern.Ich bin mir also nicht sicher, ob eine der ng-bind-Anweisungen helfen würde?

UPDATE:

Blick auf die Quelle von ng-include es scheint, dass ein guter Weg, dies zu tun, darin besteht, die Logik zum Laden von Vorlagen in einen anpassbaren Anbieter zu entkoppeln.

Der aktuelle Standardlademechanismus führt einfach eine $http.get mit $templateCache als Cache-Anbieter.Es scheint, als könnte ich meinen Vorlageninhalt injizieren JST['firstTemplate'] in den Vorlagen-Cache, aber das müsste ich beim Start für jede Vorlage tun.

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

und dann haben,

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

Ich könnte auch eine benutzerdefinierte Direktive schreiben, die neben jedem ng-include steht und die irgendwie das Zwischenspeichern von Vorlagen vornimmt.Das scheint wieder klobig.

AKTUALISIERUNG # 2

Ich werde versuchen, den templateCache zu überschreiben, damit er meinen bereits vorinstallierten JST-Hash verwendet.Werde die Ergebnisse veröffentlichen, wenn das funktioniert.

Answer 1

Hier ist die Lösung, die ich gefunden habe, um zu funktionieren, und es ist kein Hack, wie ich früher dachte (oben :-) Grundsätzlich dekoriere ich den $ templateCache.methode mit Standard $ provide abrufen.dekorateur, damit der Cache in meinem lokalen vorinstallierten Cache angezeigt wird.Es funktioniert einfach.

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;
  }
]);

Wenn Sie sich fragen, warum ich dieses Zeug in JST habe, verwenden wir ein Rails-Backend und die Rails-Asset-Pipeline, um alle Angular-Assets bereitzustellen.Mit den JST-Vorlagen können wir alle Vorlagen bündeln und während der Initialisierung in die App laden und zusätzliche Server-Roundtrips vermeiden, die normalerweise beim Abrufen von Partials und anderen Vorlageninhalten erforderlich sind.

Mit dem obigen Patch funktioniert das alles mit Angular.

Answer 2

Statt ng-include, verwenden ng-bind-html:

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

Platzieren Sie die Vorlage auf Ihrem Controller auf dem $scope:

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

Sie müssen Folgendes einschließen ngSanitize als Submodul (vergessen Sie nicht hinzuzufügen angular-sanitize.js zu):

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

Answer 3

heute stehe ich vor dem gleichen Problem, hier ist meine Lösung:

Eine benutzerdefinierte Direktive, die den JST "server / info" als Vorlage zurückgibt:

/* 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]();
        }
    }
};

Nutzung:

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

Der attrs.jstTemplate enthält den Wert, den wir in der Direktive angegeben haben.

Jubel, Niklas