UI yönlendiricinin şablonunda $ templateCache kullanma

Question

UI yönlendiricinin şablonunda $ templateCache kullanabilir miyim?

Şablon, çözüm bölümünde önbelleğe alınacak ve önbelleğe alınmış şablonu aynı durumda kullanmak istiyorum.

$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" 

Güncelleme: (+ Kod güncellenmiş)

benim kod çözmek bölümde sorunu var düşünün. çünkü şablon bölümünün ardından çalışır! ve $ templateCache.get undefined edilmesine neden oluyor.

Şablonu önbelleğe almak için ocLazyLoad eklentisini kullanıyorum ve doğru bir söz veriyor.

Şablon neden çözüm için beklemiyor?

Answer 1

dinamik dinamik şablon nasıl ayarlanacağı yolu template mülkiyet ama templateProvider yoluyla değil. Orada çalışan bir plunker ve bu pasajı geçerli: ownly sen kullanabilirsiniz değil,

• Templates

Ayrıca, ben söyleyebilirim:

// 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'); 
     }, 
    }) 
}); 

bakın $templateCache, ancak zaten ui-router tarafından kullanılıyor. bizim görüşlerimizin (url, dize ... itibaren) yükleme şablonları sorumlu ana hizmettir: onun kodun gösterdiği gibi, doğal olarak $templateCache kullanmak yapar

• $templateFactory

optimizasyon ($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

Eh, ben sadece found out, $templateCache şablonunuzun anahtarını templateUrl yol özelliği olarak ayarlayabileceğiniz ve iyi çalıştığını.

Answer 3

Zaten çözülmüş olup olmadığını bilmiyorum, ancak şablonumu aşağıdaki gibi güncellemeye karar verdim. AngularAMD/AngularUIRouter kullandığımı hatırlıyorum, ancak templateURL aynı şekilde çalışıyor. Fonksiyonu, her zaman yeni bir tarihe eşit olan "xxx" parametresini geçtiğim ve bu da sayfa aramayı tekrar zorladığım templateURL uygulamasında kullanırım. Umarım yardımcı olmuş olurum. Bu yapıldıktan sonra

.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'}) 
} 
}) 

, işlerin aşağıdaki kod beklendiği gibi: Eğer

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