अगर ui-bootstrap-tpls फ़ाइल से सिंगल, विशिष्ट टेम्प्लेट को ओवरराइड करने का एक तरीका है, तो मैं उत्सुक हूं। डिफ़ॉल्ट टेम्प्लेट का अधिकांश हिस्सा मेरी जरूरतों के हिसाब से फिट बैठता है, लेकिन कुछ ऐसे जोड़े हैं जिन्हें मैं सभी डिफ़ॉल्ट टेम्प्लेटों को हथियाने की पूरी प्रक्रिया से गुजरने के बिना बदलना चाहता हूं और उन्हें गैर-टीपीएस संस्करण तक निकाल दिया जाता है।
जवाबों:
हां, http://angular-ui.github.io/bootstrap से निर्देश अत्यधिक अनुकूलन योग्य हैं और किसी एक टेम्पलेट को ओवरराइड करना आसान है (और अभी भी अन्य निर्देशों के लिए डिफ़ॉल्ट लोगों पर निर्भर हैं)।
यह खिलाने के लिए पर्याप्त है $templateCache, या तो इसे सीधे फीड करना (जैसा कि ui-bootstrap-tplsफ़ाइल में किया गया है ) या - शायद सरल - <script>निर्देश ( डॉक्टर ) का उपयोग करके टेम्पलेट को ओवरराइड करें ।
एक काल्पनिक उदाहरण है, जहां मैं स्वैप करने के लिए चेतावनी के टेम्पलेट बदलते कर रहा हूँ xके लिए Closeनीचे दिखाया गया है:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script id="template/alert/alert.html" type="text/ng-template">
<div class='alert' ng-class='type && "alert-" + type'>
<button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
<div ng-transclude></div>
</div>
</script>
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
{{alert.msg}}
</alert>
<button class='btn' ng-click="addAlert()">Add Alert</button>
</div>
</body>
</html>
लाइव प्लंकर: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decorator$provideनिर्देश को सजाने के लिए उपयोग करने के साथ सीधे गड़बड़ करने की आवश्यकता से बचा जाता है $templateCache।
इसके बजाय, अपना बाहरी टेम्प्लेट html बनाएं जैसा कि आप सामान्य रूप से कर सकते हैं, जो भी नाम आप चाहें, और फिर उस templateUrlपर इंगित करने के लिए निर्देश को ओवरराइड करें ।
angular.module('plunker', ['ui.bootstrap'])
.config(['$provide', Decorate]);
function Decorate($provide) {
$provide.decorator('alertDirective', function($delegate) {
var directive = $delegate[0];
directive.templateUrl = "alertOverride.tpl.html";
return $delegate;
});
}
Pkozlowski.opensource का प्लंक का कांटा : http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(ध्यान दें कि आपको निर्देशन नाम के लिए 'निर्देश' प्रत्यय को जोड़ना होगा जिसे आप सजाने के लिए चाहते हैं। ऊपर, हम यूआई बूटस्ट्रैप के alertनिर्देश को सजा रहे हैं , इसलिए हम नाम का उपयोग करते हैं alertDirective।)
जैसा कि आप अक्सर केवल ओवरराइड से अधिक करना चाहते हैं templateUrl, यह एक अच्छा प्रारंभिक बिंदु प्रदान करता है जिसमें से निर्देश को आगे बढ़ाने के लिए, उदाहरण के लिए लिंक या संकलन फ़ंक्शन को ओवरराइड / रैप करके या उदाहरण के लिए ।
alertDirectiveएक खोजशब्द है? यदि हाँ, तो खोजशब्द क्या है Tabs? मैं टैब पर समान काम करने की कोशिश कर रहा हूं, लेकिन मैंने अलर्ट के माध्यम से देखा। js, और मैं नहीं देखता कि वे वहां कहां थे alertDirective।
$compileProviderजब आप इसे पंजीकृत करते हैं तो कोणीयराज आपके निर्देश के नाम पर एक 'निर्देश' प्रत्यय देते हैं ( $filterProviderइसी तरह 'फ़िल्टर' प्रत्यय के साथ); अधिकांश उद्देश्यों के लिए यह अदृश्य है, लेकिन सजाते समय आपको इस प्रत्यय को उस निर्देश के साथ जोड़ना होगा जिसे आप लक्षित करना चाहते हैं। उदाहरण के लिए, tabDirectiveयाtabsetDirective , आदि। स्पष्ट रूप से कहीं भी स्पष्ट रूप से प्रलेखित नहीं है जो मुझे मिल सकता है, लेकिन यहां $filterProviderकम से कम समान व्यवहार के लिए एक संदर्भ है : docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)। आप कुछ गतिशील व्यवहार के लिए इसका इस्तेमाल कर सकते हैं (मूल टेम्पलेटउल फ़ंक्शन पर लौटें या एक विशेषता, आदि के आधार पर अपने स्वयं के यूआरएल स्ट्रिंग)। हालाँकि, ui.bootstrap अब इसी कार्यक्षमता का उपयोग आपको template-urlनिर्देश पर एक विशेषता की आपूर्ति करने के लिए करता है , इसलिए आप संभवतः इसका उपयोग भी कर सकते हैं कि यदि आप सीधे निर्देश तत्व विशेषता के माध्यम से टेम्पलेट पथ की आपूर्ति करने में प्रसन्न हैं।
Pkozlowski.opensource का जवाब वास्तव में उपयोगी है और इससे मुझे बहुत मदद मिली! मैंने इसे अपनी हालत में बदल दिया है कि मेरे सभी कोणीय टेम्पलेट ओवरराइड को परिभाषित करने वाली एक ही फाइल है और पेलोड का आकार कम रखने के लिए बाहरी जेएस को लोड किया है।
ऐसा करने के लिए, कोणीय यूआई-बूटस्ट्रैप स्रोत जेएस फ़ाइल (जैसे ui-bootstrap-tpls-0.6.0.js) के नीचे जाएं और उस टेम्पलेट को ढूंढें जिसमें आप रुचि रखते हैं। उस पूरे ब्लॉक की प्रतिलिपि बनाएं जो टेम्पलेट को परिभाषित करता है और इसे आपके ओवरराइड जेएस फ़ाइल में पेस्ट करता है।
जैसे
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/alert/alert.html",
" <div class='alert' ng-class='type && \"alert-\" + type'>\n" +
" <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>\n" +
" <div ng-transclude></div>\n" +
" </div>");
}]);
फिर यूआई-बूटस्ट्रैप के बाद बस अपनी ओवरराइड फ़ाइल को शामिल करें और आप उसी परिणाम को प्राप्त करते हैं।
की काँटेदार संस्करण pkozlowski.opensource की खनखनाहट http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modalसेवा को सजाने के लिए पाया है (बिना उम्मीद के) अधिक विन्यास प्राप्त करने के लिए एक रखरखाव सिरदर्द का बहुत अधिक निर्माण करना।$provide.decorator('$modal'... मेरे मामले में मैंmodalWindowतत्व को प्रस्तुत नहीं करना चाहता था । कभी। मैं अभी इसका उपयोग नहीं कर रहा था, और यह सबसे अच्छा था जिसके साथ मैं आ सकता था। अगर किसी के पास है तो बेहतर तरीके से सुनना पसंद करूंगा।