एक कस्टम निर्देश का उपयोग करने के लिए पावेल की सलाह के बाद, यहां एक संस्करण है जिसे रूट-कॉनफिगर के लिए कोई पेलोड जोड़ने की आवश्यकता नहीं है, यह सुपर घोषणापत्र है, और पथ के किसी भी स्तर पर प्रतिक्रिया करने के लिए अनुकूलित किया जा सकता है, बस 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चक्र पर आग लगती है।
निर्देश घोषणा पर अपने पथ-स्तरीय तर्क को पारित करके इसे लागू करें। यह निर्दिष्ट करता है कि आप वर्तमान $ location.path () के किस hrefगुण के विरुद्ध अपनी विशेषता का मिलान करना चाहते हैं ।
<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>
इसलिए, यदि आपके टैब को पथ के आधार-स्तर पर प्रतिक्रिया करनी चाहिए, तो तर्क '1' करें। इस प्रकार, जब location.path () "/ होम" है, तो यह "# / होम" के विरुद्ध मेल करेगा href। यदि आपके पास टैब हैं जो दूसरे स्तर पर, या तीसरे या 11 वें पथ पर प्रतिक्रिया करना चाहिए, तो तदनुसार समायोजित करें। 1 या अधिक से यह स्लाइसिंग href में नापाक '#' को दरकिनार कर देगा, जो कि इंडेक्स 0 पर रहेगा।
केवल आवश्यकता यह है कि आप एक पर आह्वान करते हैं <a>, क्योंकि तत्व एक hrefविशेषता की उपस्थिति मान रहा है , जो कि वर्तमान पथ की तुलना करेगा। हालाँकि, आप माता-पिता या बच्चे के तत्व को पढ़ने / लिखने के लिए काफी आसानी से अनुकूलित कर सकते हैं, यदि आप <li>कुछ या पर आक्रमण करना पसंद करते हैं। मैं इसे खोदता हूं क्योंकि आप इसे कई संदर्भों में पुन: उपयोग कर सकते हैं बस pathLevel तर्क को अलग करके। यदि पढ़ने की गहराई तर्क में मान ली गई थी, तो आपको नेविगेशन के कई हिस्सों के साथ उपयोग करने के लिए निर्देश के कई संस्करणों की आवश्यकता होगी।
EDIT 3/18/14: समाधान अपर्याप्त रूप से सामान्यीकृत था, और यदि आप 'activeTab' के मान के लिए एक arg परिभाषित करते हैं जो undefinedदोनों के खिलाफ लौटा है $location.path(), और तत्व है href। क्योंकि: undefined === 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>'s' शामिल है , तो आप कोणीय-यूआई-बूटस्ट्रैप टैब्स मॉड्यूल के साथ जा सकते हैं , जो मुझे लगता है कि इस मूल पोस्ट के बाद आया था, और जो शायद इस से भी अधिक घोषणात्मक है। यह बुनियादी सामान के लिए कम संक्षिप्त है, लेकिन आपको कुछ अतिरिक्त विकल्प प्रदान करता है, जैसे कि अक्षम टैब और घोषणात्मक घटनाएं जो सक्रिय और निष्क्रिय होने पर आग लगाती हैं।