Açısal UI-Yönlendirici ben AngularUI paketi, UI-Router ve UI-Bootstrap iki bileşenini kullanıyorum

Question

Plunker Code Showing Issue Described Below

http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview

için ben sormadım şablonu yüklenmemesi. UI-Router, kullanıcı üst navbar bağlantılarını tıklattığında şablonları yüklemekle sorumludur.

Sadece 'UI Araç Şablonları' (AngularUI-Önyükleme ve Uyarı) kapsamında ilk iki bağlantılar

UI-Bootstrap şablonlarda güzel widget sağlamaktan sorumlu etkindir. Uygun şablonları yüklediğimden ve bu şablonların doğru denetleyiciye erişebildiğim için UI Yönlendiricinin düzgün yapılandırılmış gibi görünüyor. Sorun şu ki, benim UI-Bootstrap bileşenlerinin, bir şekilde şablonları kendileri yüklemeye çalıştıklarını belirten garip hatalar yükleme ve oluşturma başarısız oluyorlar ??? Uygulamamda Bootstrap-UI yönergelerinin yüklenmesini engelleyen niçin yanlış kullanıldım?

konsoldan

Uyarısı açılan bağlantıdan HTML Şablon

<tabset> 
    <tab heading="Static title">Static content</tab> 
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"   disabled="tab.disabled"> 
    {{tab.content}} 
    </tab> 
    <tab select="alertMe()"> 
    <tab-heading> 
    <i class="icon-bell"></i> Select me for alert! 
    </tab-heading> 
    I've got an HTML heading, and a select callback. Pretty cool! 
    </tab> 
</tabset> 

{{tabs}} 

Hata Mesajı Uyarısı şablon yükleri

Eğik İyilik

angular.module("uiRouterExample", [ 
'ui.router', 
'ui.bootstrap']).config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: 'templates/home.html', 
      controller: 'BSCtrl' 
     }) 
     .state('angularBS', { 
      url: '/angularBS', 
      templateUrl: 'templates/angularBS.html', 
      controller: 'BSCtrl' 
     }) 
     .state('alert', { 
      url: '/alert', 
      templateUrl: 'templates/alert.html', 
      controller: 'BSCtrl' 
     }) 
    ; 
}) 
.controller('BSCtrl', function ($scope) { 

    $scope.tabs = [ 
     { title:"Accordion", content:"Dynamic content 1" }, 
     { title:"Alert", content:"Dynamic content 2"}, 
     {title:"Buttons", content:"More Dynamic Content"} 
    ]; 

    $scope.test="Hello World"; 

    $scope.alerts = [ 
     { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
     { type: 'success', msg: 'Well done! You successfully read this important alert message.' } 
    ]; 

    $scope.addAlert = function() { 
     $scope.alerts.push({msg: "Another alert!"}); 
    }; 

    $scope.closeAlert = function(index) { 
     $scope.alerts.splice(index, 1); 
    }; 

}); 

Answer 1

UI-Bootstrap, ui-bootstrap- [version] .js dosyasında bulunmayan şablonların varlığına dayanır. Yapı dosyaları yapılandırma seçenekleri here olarak açıklanmıştır. Bir İlgili pasajı:

Dosyalar adlarına -tpls ile direktifleri ile birlikte önyükleme özgü şablonlar var. tüm direktifleri almak ve herhangi bir şey özelleştirmek istemiyorum insanlar için çözüm ui-bootstrap-tpls- [version] .min.js adlı bir dosya kapmaktır. Eğer şablonları size ui-bootstrap- [sürüm] .min.js alıp kendi şablonları sağlayabilir gerekmez ne Öte yandan varsayılan ... plunkr olarak

üzerinde, kullandığınız ui-bootstrap-0.7.0.js, değil ui-bootstrap-tpls-0.7.0.js. Eski şablonlar ile birlikte, ama yine de örneğin direktiflerinin templateUrls altında sabit kodlanmış onlara referans olmuş değildir: Eğer

:

.directive('alert', function() { 
    return { 
    ... 
    templateUrl:'template/alert/alert.html', 
    ... 
    }; 
}]) 

---

Düzen dahil @ inolasco cevabı ui-bootstrap-tpls kullanın.js ve hala bu sorun var, bu sizin modülünüze

eklemeniz gerekebilir. Benzer bir sorunu çözmem için bana verilen kabul edilen yanıtın eklenmesi

Answer 2

. Eğer ui-önyükleme-tpls.js kullanmak ve hala bu sorunu varsa, bu

'ui.bootstrap.tpls'

senin modülüne eklemeniz gerektiğini olabilir. Bu benim için çalıştı.