Utilizzo di $ templateCache nel modello di un router uffiale

Question

Posso usare $ templateCache nel modello del router?

Il modello verrà memorizzato nella cache nella sezione di risoluzione e voglio utilizzare il modello memorizzato nella cache nello stesso stato.

$stateProvider 
.state('dashboard', { 
    url: "/dashboard", 
    template: function($templateCache){ 
     console.log('test 2'); 
     return $templateCache.get('templates/template1.html'); // returns undefined 
    }, 
    resolve:{ 
     baseTemplates: function($ocLazyLoad) { 
      // here the template will be cached... 
      return $ocLazyLoad.loadTemplateFile(['base/dashboard.html']).then(function(){ 
       console.log('test 1'); 
      }); 
     } 
    } 
}) 
// console prints "test 2" before than "test 1" 

Update: (+ codice aggiornato)

penso sezione risolutezza del mio codice ha un problema. perché viene eseguito dopo la sezione del modello! e causa la restituzione di $ templateCache.get non definito.

Uso il plug-in ocLazyLoad per memorizzare il modello nella cache e restituisce una promessa corretta.

Perché il modello non attende la risoluzione?

Answer 1

Il modo come impostare dinamicamente il modello dinamico non è tramite la proprietà template ma templateProvider. C'è un plunker di lavoro, e questo è il frammento:

// this is a run event (executed after config in fact) 
// in which we do inejct a value into $templateCache 
.run(function($templateCache){ 
    // this could be lazy... elswhere 
    $templateCache.put('templates/template1.html' 
    , '<div><h4>dashboard</h4></div>'); 
    }) 
.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/dashboard'); 

    $stateProvider.state('dashboard', { 
     url: '/dashboard', 
     // this is the place where to resolve dynamic template 
     templateProvider: function($templateCache){ 
     // simplified, expecting that the cache is filled 
     // there should be some checking... and async $http loading if not found 
     return $templateCache.get('templates/template1.html'); 
     }, 
    }) 
}); 

See:

• Templates

E anche, direi, che non ownly si possibile utilizzare il $templateCache, ma è già utilizzato da ui-router. Il servizio principale responsabile per i modelli di carico (da URL, stringa ...) per i nostri punti di vista è il:

• $templateFactory

che, come i suoi spettacoli di codice, fa uso di $templateCache come un naturale ottimizzazione ($templateFactorycode snippet :)

... 
/** 
* @ngdoc function 
* @name ui.router.util.$templateFactory#fromUrl 
* @methodOf ui.router.util.$templateFactory 
* 
* @description 
* Loads a template from the a URL via `$http` and `$templateCache`. 
* 
* @param {string|Function} url url of the template to load, or a function 
* that returns a url. 
* @param {Object} params Parameters to pass to the url function. 
* @return {string|Promise.<string>} The template html as a string, or a promise 
* for that string. 
*/ 
this.fromUrl = function (url, params) { 
    if (isFunction(url)) url = url(params); 
    if (url == null) return null; 
    else return $http 
     .get(url, { cache: $templateCache }) 
     .then(function(response) { return response.data; }); 
}; 
... 

Answer 2

Beh, ho appena found out è possibile impostare semplicemente la chiave del modello $templateCache come proprietà di route templateUrl e funziona correttamente.

Answer 3

Non so se è già stato risolto, tuttavia, ho deciso di aggiornare il mio modello come segue. Ricordo che utilizzo AngularAMD/AngularUIRouter, ma templateURL funziona allo stesso modo. Uso la funzione in templateURL, dove passo ogni volta il parametro "xxx" uguale a una nuova data, e questo forza nuovamente la ricerca della pagina. Spero di aver contribuito bene.

.state ('MyReports', { 
    parent: 'index', 
    url: '/MyReports/:cd_menu', 
    views: { 
     'BodyView': angularAMD.route ({templateUrl: function (params) { 
     return "MyReportsAction/getTemplate?cd_menu="+ params.cd_menu + "&xxx="+ new Date(); 
    }, 
    controllerUrl: 'js/app/base/controllers/MyReportsController', 
    controller: 'MyReportsController'}) 
} 
}) 

Una volta fatto questo, il codice qui sotto funziona come previsto:

$state.go('MyReports', {'cd_menu': cd_menu});