جهاز توجيه واجهة المستخدم الزاوي:كيف يمكنني جعل العرض الأصلي "نشطًا" عند الانتقال إلى العرض المتداخل؟
-
21-12-2019 - |
سؤال
أنا أعمل في مشروع قام بتنفيذ جهاز توجيه واجهة المستخدم ويستخدمه ui-sref-active="active"
لإضافة الفئة النشطة إلى عنصر قائمة التنقل عندما يكون هذا العنصر هو المسار الحالي.ومع ذلك، عند الانتقال إلى طريقة عرض متداخلة داخل طريقة العرض هذه، فإن عنصر القائمة الرئيسية لم يعد نشطًا.انظر المكبس التالي:
http://plnkr.co/edit/2CoEdS?p=preview
بشكل افتراضي (أو إذا قمت بالنقر فوقه) يكون الطريق 1 "نشطًا".عندما تنقر على "إظهار القائمة"، سترى أن الطريق 1 لم يعد نشطًا.
يحرر:
الفرق الوحيد بين هذا المثال ومشروعي الفعلي هو أن قائمة التنقل في مشروعي الفعلي تحتوي على وحدة التحكم الخاصة بها وبالتالي لا تستخدم نفس النطاق مثل وحدة التحكم لـ "route1".
المحلول
تحرير للحصول على جهاز توجيه واجهة المستخدم المحدث 0.2.13:
ui-sref-active="active"
يقوم الآن بتعيين الفئة "النشيطة" عندما تكون الحالة الحالية هي حالة ui-sref أو أي طفل
ui-sref-active-eq="active"
يتصرف مثل التكرارات السابقة لـ ui-sref-active، ويقوم فقط بتعيين الفئة للحالة الدقيقة
الجواب الأصلي:
راجع مشكلات جهاز توجيه واجهة المستخدم المفتوحة:https://github.com/angular-ui/ui-router/issues/704 و 818
الحل العام الذي يقترحه الأشخاص هو:
ng-class="{active:$state.includes('route1')}"
بالطبع، يجب إضافة $state إلى $scope.انظر الجزء المحدث: http://plnkr.co/edit/KHLDJP?p=preview
نصائح أخرى
لديك فهم خاطئ لـ ui-sref-active="active"
<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
سيُظهر هذا تمييزًا خاصًا لـ CSS فقط عندما تكون في حالة المسار 1 (المرجع https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active).هذا هو الحال عند النقر فوق الطريق 1.ولكن عندما تنقر على "إظهار القائمة"، فإنك لم تعد في الطريق 1.بل أنت في حالة "route1.list".يمكنك التحقق من ذلك عن طريق كتابة الكود التالي.هذا بشكل صارم لفهم كيفية عمل الدولة.
js
داخل وحدة التحكم
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
داخل أتش تي أم أل
{{currentState}}
إذا نظرت عن كثب إلى وثائق ui-sref-active، فإنها لا تنظر فقط إلى StateName ولكن أيضًا إلى StateParams، ومن ثم عندما تنتقل إلى الحالة الفرعية، فإنها لم تعد تغير CSS.من الكود المصدري يصبح الأمر أكثر وضوحًا.
function update() {
if ($state.$current.self === state && matchesParams()) {
$element.addClass(activeClass);
} else {
$element.removeClass(activeClass);
}// route1===route1.list will not be true.
لحل المشكلة، تذكر أن متغيرات النطاق يتم توريثها في طرق العرض المتداخلة.
وحدة تحكم داخل المسار.
$scope.route1Active = true;
في أتش تي أم أل
<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
يدعم جهاز التوجيه Angular UI الآن هذا محليًا.انظر الالتزام https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01
كان الحل الخاص بي هو تعيين:
<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
تمت إضافة الحالة مسبقًا إلى نطاق وحدة التحكم:
$scope.state = $state;
لا تحتاج إلى القيام بأي شيء في وحدات التحكم.هنا هو رمز المثال الخاص بي:
<ul class="nav nav-pills nav-stacked" role="tablist">
<li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
</ul>
في تكوين المسار:
$stateProvider.state('Booking', {
abstract: true,
url: '/Booking',
templateUrl: "TourApp/Templates/Booking/SideMenu.html",
controller: "SideMenuController"
});
$stateProvider.state('Booking.Step1', {
url: "/Step1",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step1.html",
controller: "Step1Controller"
}
}
});
$stateProvider.state('Booking.Step2', {
url: "/Step2",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step2.html",
controller: "Step2Controller"
}
}
});
لقد قاموا الآن بالتحديث والطريقة الجديدة للقيام بذلك هي
<a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>
أدناه هو ملف الدولة
angular.module('manage.people', ['people.invite'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('main.app.manage.people', {
url: '/people',
abstract: true,
cache: false,
views: {
'tabContent': {
template: '<div ui-view="peopleContent"></div>',
controller: 'peopleController'
}
}
})
.state('main.app.manage.people.list', {
url: '/list',
views: {
'peopleContent': {
templateUrl: '/internal/main/app/manage/people/views/people.html',
controller: 'peopleListController'
}
}
});
لدينا بالفعل حل دون أي "اختراق" هنا
هذه هي الطريقة للقيام بما يلي:
HTML>
<li ui-sref-active="active" >
<a href="#" class="submenu" ui-sref="bands">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
Bands
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li ui-sref-active="active">
<a ui-sref="bands.nirvana">
Nirvana
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.iron">
Iron
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.metalica">
Metalica
</a>
</li>
</ul>
سيكون تكوين جهاز التوجيه الخاص بنا على هذا النحو>
$stateProvider.state('bands', {
abstract: true,
url: '/bands',
templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view>
controller: "SomeController as vm"
}).state('bands.nirvana', {
url: '/nirvana',
templateUrl: "myapp/categories/band.nirvana.html",
controller: "SomeController as vm"
}).state('bands.iron', {
url: '/iron',
templateUrl: "myapp/categories/band.iron.html",
controller: "SomeController as vm"
}).state('bands.meatlica', {
url: '/metalica',
templateUrl: "myapp/categories/band.metalica.html",
controller: "SomeController as vm"
})
لقد جئت إلى هنا بعد عامين وتم طرح السؤال ولكن angular-ui-router
لديه نهج ماهر في حل هذه المشكلة.لقد نجحت مع الدول المتداخلة أيضًا.
<ul>
<li ui-sref-active="active" class="item">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
عندما ينتقل التطبيق إلى home
الدولة، وهذه هي الطريقة التي سيظهر بها HTML الناتج:
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
ui-sref-المرجع السريع النشط :
توجيه يعمل جنبًا إلى جنب مع UI-SREF لإضافة فصول إلى عنصر عندما تكون حالة توجيه UI-SREF ذات الصلة نشطة ، وإزالتها عندما تكون غير نشطة.تتمثل حالة الاستخدام الأساسية في تبسيط المظهر الخاص لقوائم التنقل التي تعتمد على واجهة المستخدم ، من خلال ظهور زر القائمة "النشط" في حالة مختلفة ، مما يميزها عن عناصر القائمة غير النشطة.
أتمنى أن يكون هذا هو ما كنت تبحث عنه. ضع عنوان url الأصلي في فئة القائمة، والآن عندما تنتقل إلى فئة فرعية، سيكون الفصل الأصلي نشطًا
الخطوة 1:أضف وحدة تحكم لشريط التنقل الخاص بك أو في وحدة التحكم الموجودة لديك حيث يتم تضمين شريط التنقل، أضف ما يلي
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
الخطوة 2:في شريط التنقل الخاص بك
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
هذا كل شيء.