আমি কৌতূহলী যদি ইউআই-বুটস্ট্র্যাপ-টিপিএলএস ফাইল থেকে একক, নির্দিষ্ট টেম্পলেটগুলিকে ওভাররাইড করার উপায় থাকে। ডিফল্ট টেম্পলেটগুলির সিংহভাগই আমার প্রয়োজনের সাথে খাপ খায়, তবে সমস্ত ডিফল্ট টেমপ্লেট দখল এবং নন-টিপিএলএস সংস্করণে তারযুক্ত হয়ে ওঠার পুরো প্রক্রিয়াটি না চালিয়ে আমি কিছু দু'টি নির্দিষ্ট প্রতিস্থাপন করতে চাই।
উত্তর:
হ্যাঁ, http://angular-ui.github.io/bootstrap এর দিকনির্দেশগুলি অত্যন্ত স্বনির্ধারিত এবং কোনও একটি টেমপ্লেটকে ওভাররাইড করা সহজ (এবং এখনও অন্য নির্দেশাবলীর জন্য ডিফল্টগুলির উপর নির্ভর করে)।
এটি $templateCacheখাওয়ানোর জন্য যথেষ্ট , হয় একে সরাসরি খাওয়ানো ( ui-bootstrap-tplsফাইলে যেমন করা হয়েছে ) বা - সম্ভবত সহজ - <script>নির্দেশনা ( ডক ) ব্যবহার করে কোনও টেম্পলেট ওভাররাইড করে ।
একটি কল্পিত উদাহরণ যেখানে আমি swap 'র সতর্ক টেম্পলেট পরিবর্তন করছি 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= পূর্বরূপ
$provide.decoratorব্যবহার $provideডিরেক্টিভের সাজাইয়া সাথে সরাসরি জগাখিচুড়ি প্রায় প্রয়োজনীয়তা এড়াতে $templateCache।
পরিবর্তে, আপনার বাহ্যিক টেমপ্লেট এইচটিএমএল তৈরি করুন যা আপনি সাধারণত যা খুশি নাম সহ সাধারণভাবে করতে পারেন, এবং তারপরে নির্দেশকে নির্দেশ 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;
});
}
পোকোজ্লোস্কি.ওপেনসোর্সের প্লাঙ্কার কাঁটাচামচ : http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p= পূর্বরূপ
(নোট করুন যে আপনি যে দিকনির্দেশক নামটি সাজাতে চান তার সাথে অবশ্যই আপনাকে অবশ্যই 'নির্দেশিকা' প্রত্যয় যুক্ত করতে হবে ove উপরে, আমরা ইউআই বুটস্ট্র্যাপের alertনির্দেশ সজ্জিত করছি , তাই আমরা নামটি ব্যবহার করি alertDirective))
যেহেতু আপনি প্রায়শই কেবল ওভাররাইডের চেয়ে আরও বেশি কিছু করতে চান templateUrl, এটি একটি ভাল সূচনা পয়েন্ট দেয় যা থেকে নির্দেশকে আরও প্রসারিত করা যায়, উদাহরণস্বরূপ লিঙ্কটি ওভাররাইড / মোড়ানো বা ফাংশন ( উদাহরণস্বরূপ ) দ্বারা সংযোজন করে ।
alertDirectiveএকটি কীওয়ার্ড? যদি হ্যাঁ, কীওয়ার্ডটি কী Tabs? আমি ট্যাবগুলিতে অনুরূপ কাজ করার চেষ্টা করছি, তবে আমি সতর্কতা.জেএস দেখেছি এবং সেখানে তারা কোথায় আছে তা আমি দেখতে পাচ্ছি alertDirectiveনা।
$compileProviderযখন আপনি এটি নিবন্ধভুক্ত করেন তখন কৌণিকগুলি আপনার নির্দেশিকার নামে একটি 'নির্দেশিকা' প্রত্যয় যুক্ত করে ( $filterProviderএকইভাবে 'ফিল্টার' প্রত্যয় দিয়েও করা হয়); বেশিরভাগ উদ্দেশ্যে এটি অদৃশ্য, তবে সাজসজ্জা করার সময় আপনি যে লক্ষ্যটিকে লক্ষ্য করতে চান সেই নির্দেশকে এই প্রত্যয় যুক্ত করতে হবে। উদাহরণস্বরূপ, tabDirectiveবা tabsetDirective, ইত্যাদি ঠিক যে কোথাও আমি পেয়েছি ঠিক তেমন নথিভুক্ত নয়, তবে $filterProviderকমপক্ষে এখানে একইরকম আচরণের জন্য একটি রেফারেন্স দেওয়া হয়েছে : ডকস.আঙ্গুলারজ.স.সি
function(element, attributes)টেম্পলেট ইউআরএল সরবরাহ করতে পারেন । আপনি এটি কিছু গতিশীল আচরণের জন্য ব্যবহার করতে পারেন (মূল টেম্পলেট ইউআরএল ফাংশনটি বা কোনও বৈশিষ্ট্যের উপর নির্ভর করে আপনার নিজের url স্ট্রিং ইত্যাদি)। যাইহোক, ui.bootstrap এখন আপনাকে template-urlনির্দেশের উপর কোনও অ্যাট্রিবিউট সরবরাহ করতে এই একই কার্যকারিতাটিও ব্যবহার করে , যাতে আপনি সম্ভবত এটি ব্যবহার করতে পারেন যদি আপনি সরাসরি উপাদান নির্দেশকের মাধ্যমে টেমপ্লেট পাথ সরবরাহ করতে খুশি হন।
Pkozlowski.opensource থেকে উত্তরটি সত্যিই দরকারী এবং আমাকে অনেক সাহায্য করেছে! আমি আমার কৌনিক টেম্পলেটটিকে ওভাররাইডগুলি সংজ্ঞায়িত করার জন্য একটি একক ফাইল রাখার শর্তে এটি ট্যুইক করেছি এবং পেওলডের আকারটি কম রাখতে বহিরাগত জেএস লোড করেছি।
এটি করতে, কৌনিক ইউআই-বুটস্ট্র্যাপ উত্স জেএস ফাইলের নীচে যান (যেমন ui-bootstrap-tpls-0.6.0.js) এবং আপনার আগ্রহী টেম্পলেটটি সন্ধান করুন the টেমপ্লেটটি সংজ্ঞায়িত করে এমন পুরো ব্লকটি অনুলিপি করুন এবং এটি আপনার ওভাররাইড জেএস ফাইলটিতে আটকান paste
যেমন
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>");
}]);
তারপরে ইউআই-বুটস্ট্র্যাপের পরে আপনার ওভাররাইড ফাইলটি অন্তর্ভুক্ত করুন এবং আপনি একই ফলাফল অর্জন করতে পারেন।
এর Forked সংস্করণ pkozlowski.opensource এর ডল্যার http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modalসার্ভিসটি সজ্জিত করে আরও রক্ষণাবেক্ষণের মাথাব্যথা তৈরি না করে (আশাকরি) আরও কনফিগারেশনে পাওয়ার জন্য খুঁজে পেয়েছি ।$provide.decorator('$modal'... আমার ক্ষেত্রে আমিmodalWindowউপাদানটি রেন্ডার করতে চাইনি । কখনও। আমি কেবল এটি ব্যবহার করছিলাম না, এবং এটিই আমি সেরাভাবে সামনে আসতে পেরেছিলাম। আমি কারও কাছে থাকলে আরও ভাল উপায় শুনতে পছন্দ করি।