কাস্টম নির্দেশিকা ব্যবহারের জন্য পাভেলের পরামর্শ অনুসরণ করে, এখানে এমন একটি সংস্করণ রয়েছে যার জন্য রুটকনফাইজে কোনও পেডলোড যুক্ত করা দরকার না, এটি উচ্চ ঘোষক, এবং পথটির যে কোনও স্তরের সাথে প্রতিক্রিয়া জানাতে অভিযোজিত হতে পারে, যার পরিবর্তে আপনি কোনটির slice()দিকে মনোযোগ দিচ্ছেন? ।
app.directive('detectActiveTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
/*
Designed for full re-usability at any path, any level, by using
data from attrs. Declare like this:
<li class="nav_tab">
<a href="#/home" detect-active-tab="1">HOME</a>
</li>
*/
// This var grabs the tab-level off the attribute, or defaults to 1
var pathLevel = attrs.detectActiveTab || 1,
// This var finds what the path is at the level specified
pathToCheck = $location.path().split('/')[pathLevel] ||
"current $location.path doesn't reach this level",
// This var finds grabs the same level of the href attribute
tabLink = attrs.href.split('/')[pathLevel] ||
"href doesn't include this level";
// Above, we use the logical 'or' operator to provide a default value
// in cases where 'undefined' would otherwise be returned.
// This prevents cases where undefined===undefined,
// possibly causing multiple tabs to be 'active'.
// now compare the two:
if (pathToCheck === tabLink) {
element.addClass("active");
}
else {
element.removeClass("active");
}
});
}
};
});
আমরা কোনও পথ চালিয়ে না গিয়ে $routeChangeSuccessইভেন্টটি শোনার মাধ্যমে আমাদের লক্ষ্যগুলি অর্জন করছি $watch। আমি বিশ্বাস করি যে এর অর্থ এই যে যুক্তিটি প্রায়শই চালানো উচিত, কারণ আমি মনে করি প্রতিটি $digestচক্রকে আগুন দেখায় ।
নির্দেশের ঘোষণায় আপনার পথ-স্তরের যুক্তিটি পাস করে এটি চাওয়া vo এটি বর্তমান ies অবস্থান.পাথ () এর কোন অংশের hrefবিপরীতে আপনার বৈশিষ্ট্যটির সাথে মিল রাখতে চায় তা নির্দিষ্ট করে।
<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>
সুতরাং, যদি আপনার ট্যাবগুলি যদি পথের বেস-স্তরে প্রতিক্রিয়া দেখাতে পারে তবে আর্গুমেন্টটি '1' করুন make সুতরাং, যখন অবস্থান.path () "/ home" হয় তখন এটি "# / home" এর সাথে মিলবে href। আপনার যদি এমন ট্যাব থাকে যা দ্বিতীয় স্তরের, বা তৃতীয়, বা 11 তম পথের প্রতিক্রিয়া দেখা উচিত, সেই অনুসারে সামঞ্জস্য করুন। 1 বা ততোধিকের থেকে এই টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো।
কেবলমাত্র প্রয়োজনটি হ'ল আপনি একটিতে প্রার্থনা করুন <a>, কারণ উপাদানটি কোনও hrefবৈশিষ্ট্যের উপস্থিতি ধরে নিচ্ছে, যা এটি বর্তমান পথের সাথে তুলনা করবে। যাইহোক, আপনি কোনও অভিভাবক বা সন্তানের উপাদান পড়তে / লিখতে মোটামুটি সহজে মানিয়ে নিতে পারেন, যদি আপনি <li>বা কোনও কিছুতে প্রার্থনা করতে পছন্দ করেন । আমি এটি খনন করেছি কারণ আপনি কেবলমাত্র পথচলা আর্গুমেন্টের পরিবর্তিত করে অনেক প্রসঙ্গে এটি পুনরায় ব্যবহার করতে পারেন। পড়ার গভীরতা যদি যুক্তিতে অনুমান করা হয়, আপনি নেভিগেশনের একাধিক অংশ ব্যবহারের জন্য নির্দেশিকার একাধিক সংস্করণ প্রয়োজন need
সম্পাদনা 3/18/14: সমাধানটি অপর্যাপ্তভাবে সাধারণীকরণ করা হয়েছিল, এবং যদি আপনি 'অ্যাক্টিভ্যাব' এর মান , এবং উপাদানটির undefinedবিপরীতে ফিরে আসার জন্য কোনও যুক্তিকে সংজ্ঞায়িত করেন তবে সক্রিয় হবে । কারণ: । এই শর্তটি ঠিক করতে আপডেট হয়েছে।$location.path()hrefundefined === undefined
এতে কাজ করার সময়, আমি বুঝতে পেরেছিলাম যে এমন কোনও সংস্করণ থাকা উচিত ছিল যা আপনি কেবলমাত্র পিতামাতার সাথে এটির মতো টেম্পলেট কাঠামোর সাথে ঘোষণা করতে পারেন:
<nav id="header_tabs" find-active-tab="1">
<a href="#/home" class="nav_tab">HOME</a>
<a href="#/finance" class="nav_tab">Finance</a>
<a href="#/hr" class="nav_tab">Human Resources</a>
<a href="#/quarterly" class="nav_tab">Quarterly</a>
</nav>
মনে রাখবেন যে এই সংস্করণটি আর দূরবর্তীভাবে বুটস্ট্র্যাপ-শৈল HTML এর অনুরূপ নয়। তবে, এটি আরও আধুনিক এবং কম উপাদান ব্যবহার করে, তাই আমি এটির জন্য আংশিক। নির্দেশকের এই সংস্করণটি, মূলটিও এখন গিথুবকে ড্রপ-ইন মডিউল হিসাবে উপলব্ধ যা আপনি কেবল নির্ভরতা হিসাবে ঘোষণা করতে পারেন। যদি কেউ তাদেরকে ব্যবহার করে তবে আমি তাদের বোর-আইজে খুশি হব।
এছাড়াও, আপনি যদি বুটস্ট্র্যাপ-সামঞ্জস্যপূর্ণ সংস্করণ চান যা এর অন্তর্ভুক্ত থাকে তবে <li>আপনি কৌণিক-ইউআই-বুটস্ট্র্যাপ ট্যাব মডিউলটি নিয়ে যেতে পারেন , যা আমার মনে হয় এই মূল পোস্টের পরে প্রকাশিত হয়েছিল এবং এটি সম্ভবত এটির চেয়ে আরও বেশি ঘোষিত। এটি বেসিক স্টাফগুলির জন্য কম সংক্ষিপ্ত নয়, তবে আপনাকে কিছু অতিরিক্ত বিকল্প সরবরাহ করে, যেমন অক্ষম ট্যাব এবং ঘোষিত ইভেন্টগুলি যা অ্যাক্টিভেট এবং নিষ্ক্রিয় করে।