कोणीय यूआई-रूटर टेम्पलेट है कि मैं

Plunker Code Showing Issue Described Below कोणीय यूआई-रूटर टेम्पलेट है कि मैं

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

के लिए मैं AngularUI सुइट, यूआई-रूटर और यूआई-बूटस्ट्रैप के दो घटक उपयोग कर रहा हूँ नहीं पूछा लोड करने के लिए विफल रहता है। यूआई-राउटर टेम्पलेट लोड करने के लिए ज़िम्मेदार है जब उपयोगकर्ता मेरे शीर्ष नौसेना लिंक पर क्लिक करता है।

केवल 'यूआई विजेट टेम्पलेट' (AngularUI-बूटस्ट्रैप और चेतावनी) के तहत पहले दो लिंक सक्रिय

enter image description here

यूआई-बूटस्ट्रैप टेम्पलेट्स के भीतर अच्छा विगेट्स बनाने के लिए जिम्मेदार है कर रहे हैं। मुझे लगता है कि यूआई-राउटर ठीक से कॉन्फ़िगर किया गया है कि मैं उचित टेम्पलेट लोड कर रहा हूं और उन टेम्पलेट्स के पास सही नियंत्रक तक पहुंच है। मेरी समस्या यह है कि मेरा यूआई-बूटस्ट्रैप घटक लोड करने और अजीब त्रुटियों को उत्पन्न करने में विफल रहे हैं जो इंगित करते हैं कि वे किसी भी तरह टेम्पलेट लोड करने का प्रयास कर रहे हैं ??? बूटस्ट्रैप-यूआई निर्देशों को लोड होने से मुझे अपने कार्यान्वयन में क्या गड़बड़ है?

चेतावनी लटकती कड़ी के लिए एचटीएमएल खाका कंसोल से

<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}}

त्रुटि संदेश जब चेतावनी टेम्पलेट लोड

enter image description here

कोणीय अच्छाई

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

});

स्रोत

2013-11-23 mccainz

यूआई-बूटस्ट्रैप टेम्पलेट्स की उपस्थिति पर निर्भर करता है जो यूई-बूटस्ट्रैप- [संस्करण] .js फ़ाइल में मौजूद नहीं हैं। बिल्ड फाइल कॉन्फ़िगरेशन विकल्प here वर्णित हैं। एक प्रासंगिक स्निपेट: उनके नाम में -tpls साथ

फ़ाइलें बूटस्ट्रैप विशेष निर्देशों के साथ बंडल खाका नहीं है। उन सभी लोगों के लिए जो सभी निर्देश लेना चाहते हैं और को अनुकूलित करने की आवश्यकता नहीं है, समाधान ui-bootstrap-tpls- [version] .min.js नाम की फ़ाइल को पकड़ना है। अगर, दूसरे हाथ डिफ़ॉल्ट टेम्पलेट्स क्या आप आप ui-bootstrap- [संस्करण] .min.js लेने के लिए और अपने स्वयं के टेम्पलेट्स प्रदान कर सकता है की जरूरत नहीं कर रहे हैं ...

plunkr में पर, आप उपयोग कर रहे ui-bootstrap-0.7.0.js, ui-bootstrap-tpls-0.7.0.js नहीं। पूर्व टेम्पलेट्स के साथ बंडल नहीं है, लेकिन फिर भी, निर्देशों 'templateUrls तहत हार्ड-कोडेड उन्हें संदर्भ होते हैं, उदाहरण के लिए:

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

संपादित करें, @ inolasco सहित उत्तर:

आप तो यूई-बूटस्ट्रैप-टीपीएल का प्रयोग करें।जेएस और अभी भी यह समस्या है, हो सकता है कि आपको

'ui.bootstrap.tpls'

को अपने मॉड्यूल में जोड़ने की आवश्यकता हो।

स्रोत

2013-11-23 01:15:25 Sarah

आप बहुत सही हैं! आपका बहुत बहुत धन्यवाद। – mccainz

कृपया @inolasco जवाब जोड़ें! – Roberto

स्वीकृत उत्तर में जोड़ना, जो मुझे एक समान समस्या को हल करने के लिए प्रेरित करता है। यदि आप ui-बूटस्ट्रैप-tpls.js का उपयोग करें और अभी भी इस समस्या है, यह हो सकता है कि आप

'ui.bootstrap.tpls'

अपने मॉड्यूल को जोड़ने की जरूरत है। यह मेरे लिए काम किया।

स्रोत

2014-07-11 22:52:34 inolasco

आशा @ सराह इसे अपने उत्तर – Roberto

में जोड़ती है जो मेरे लिए काम करती है। धन्यवाद –

कोणीय यूआई-रूटर टेम्पलेट है कि मैं

उत्तर

संबंधित मुद्दे