Angularjs बूटस्ट्रैप टैबसेट टैब शीर्षक

Question

मुझे आश्चर्य है कि क्या कोणीय बूटस्ट्रैप टैबसेट टैब शीर्षक के अंदर HTML लिखना संभव है या नहीं। मैं शीर्षक के अंदर एक एसवीजी जोड़ने की कोशिश कर रहा हूँ। मैंने जो मुद्दा उठाया है उसे दिखाने और प्रदर्शित करने के लिए मैंने प्लंकर में एक त्वरित स्निपेट बनाया है।

<tabset> 
    <tab heading="<span>hello</span><em>1</em>">One</tab> 
    <tab heading="Two">Two</tab> 
    <tab heading="Three">Three</tab> 
</tabset> 

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

किसी भी विचार?

धन्यवाद

Answer 1

कोणीय बूटस्ट्रैप v0.14 +

कोणीय बूटस्ट्रैप v0.14 introduced new prefixes सबसे पहले प्रदान किए गए नियंत्रणों के लिए। नीचे दिया गया मूल उत्तर अभी भी लागू होता है, लेकिन आपको नए टैग नाम uib-tabset, uib-tab, और uib-tab-heading का उपयोग करना होगा।

<uib-tabset> 
    <uib-tab> 
    <uib-tab-heading> 
     <span>hello</span><em>1</em> 
    </uib-tab-heading> 
    One 
    </uib-tab> 
    <uib-tab heading="Two">Two</uib-tab> 
    <uib-tab heading="Three">Three</uib-tab> 
</uib-tabset> 

कोणीय बूटस्ट्रैप < v0.14

आप चाहिए tab तत्व के भीतर tab-heading तत्व का उपयोग होगा यदि आप शीर्षक के भीतर एचटीएमएल चाहते हैं (के रूप में docs में उदाहरण में दिखाया गया):

<tabset> 
    <tab> 
    <tab-heading> 
     <span>hello</span><em>1</em> 
    </tab-heading> 
    One 
    </tab> 
    <tab heading="Two">Two</tab> 
    <tab heading="Three">Three</tab> 
</tabset> 

अद्यतन प्लंकर here अपडेट किया गया।

Answer 2

[संपादित करें] टेलर बुकानन के जवाब सही जवाब है!

टैब निर्देश द्वारा उपयोग किए गए खाके को देखते हुए, शीर्षकों सामग्री छोड़ दिया जाएगा: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

तो यह आपके शीर्षकों में एचटीएमएल उपयोग करने के लिए संभव नहीं है।

---

तुम इतनी तरह फिर से परिभाषित करने टैब टेम्पलेट से एक काम के आसपास बना सकते हैं:

angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) { 
    $templateCache.put("template/tabs/tab.html", 
    "<li ng-class=\"{active: active, disabled: disabled}\">\n" + 
    " <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" + 
    "</li>\n" + 
    ""); 
}]); 

तुम भी कोणीय sanitize.js nclude को सुरक्षित रूप से एचटीएमएल सामग्री बाध्य करने के लिए की आवश्यकता होगी।

कार्य यहाँ डेमो: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

Answer 3

आप अपने टैब टैग एक आईडी देना और फिर jQuery का उपयोग एचटीएमएल बढ़ाने के लिए कर सकते हैं।
... टैब आईडी = "MyID" ....

और फिर jQuery ("# MyID")। एचटीएमएल ("नए HTML")

Answer 4

  <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" > 
       <a href="/ibox">Status1</a> 
      </li> 


      <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'"> 
       <a href="/netapp">Status</a> 
      </li> 


    </tabset> 

Answer 5

2016 के बाद से

स्वीकार किए जाते हैं जवाब ui-बूटस्ट्रैप पहले version 0.14.0 के लिए ठीक है, संस्करण के बाद से 0.14.0(2015/10/09) टैब uib- उपसर्ग का उपयोग करें।

देखें changelog

तो आप इस पर देख रहे हैं के लिए

<uib-tabset> 
    <uib-tab> 
    <uib-tab-heading> 
     <span>hello</span><em>1</em> 
    </uib-tab-heading> 
    One 
    </uib-tab> 
    <uib-tab heading="Two">Two</uib-tab> 
    <uib-tab heading="Three">Three</uib-tab> 
</uib-tabset>