Chargement des partiels ng-include à partir du cache de modèles local préchargé (JST)

Question

J'ai mon modèle préchargé dans un tableau de chaînes javascript, comme var t = JST['firstTemplate'], où t serait comme,

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

Comment puis-je utiliser ce modèle préchargé dans un ng-include directif?

Notez que mon modèle dans ce scénario peut être plus complexe, avec d'éventuelles vues et modèles imbriqués ainsi que leurs propres étendues et contrôleurs imbriqués.Je ne sais donc pas si l'une des directives ng-bind serait utile ?

MISE À JOUR:

En regardant la source de ng-include il semble qu'un bon moyen d'y parvenir serait de découpler la logique de chargement du modèle en un fournisseur personnalisable.

Le mécanisme de chargement par défaut actuel fait simplement un $http.get avec $templateCache en tant que fournisseur de cache.Il semble que je puisse injecter le contenu de mon modèle dans JST['firstTemplate'] dans le cache des modèles, mais je devrais le faire au démarrage, pour chaque modèle.

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

et puis j'ai,

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

Je pourrais également écrire une directive personnalisée qui accompagne chaque ng-include, qui effectue d'une manière ou d'une autre cette pré-mise en cache des modèles.Cela semble encore une fois maladroit.

MISE À JOUR #2

Je vais essayer de remplacer le templateCache, afin qu'il utilise mon hachage JST déjà préchargé.Publiera les résultats si cela fonctionne.

Answer 1

Voici la solution que j'ai trouvée qui fonctionne, et ce n'est pas un hack comme je le pensais plus tôt (ci-dessus :-) En gros, décorez la méthode $templateCache.get en utilisant le standard $provide.decorator afin que le cache soit visible dans mon local préchargé cache.Cela fonctionne.

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

Si vous vous demandez pourquoi j'ai ce genre de choses dans JST, nous utilisons un backend rails et le pipeline d'actifs rails pour fournir tous les actifs angulaires.Les modèles JST nous permettent de regrouper tous les modèles et de les charger dans l'application lors de l'initialisation, et d'éviter les allers-retours supplémentaires sur le serveur qui sont normalement nécessaires lors de la récupération des partiels et d'autres contenus de modèles.

Le patch ci-dessus fait que tout cela fonctionne avec angulaire.

Answer 2

Au lieu de ng-include, utiliser ng-bind-html:

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

Sur votre contrôleur, placez le modèle sur le $scope:

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

Vous devrez inclure ngSanitize en sous-module (n'oubliez pas d'ajouter angular-sanitize.js aussi):

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

Answer 3

aujourd'hui je suis confronté au même problème, voici ma solution :

Une directive personnalisée, qui renvoie le JST "server/info" comme modèle :

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

Usage:

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

Le attrs.jstTemplate contient la valeur que nous avons fournie dans la directive.

Bravo, Niklas