جهاز توجيه واجهة المستخدم الزاوي:كيف يمكنني جعل العرض الأصلي "نشطًا" عند الانتقال إلى العرض المتداخل؟

Question

أنا أعمل في مشروع قام بتنفيذ جهاز توجيه واجهة المستخدم ويستخدمه ui-sref-active="active" لإضافة الفئة النشطة إلى عنصر قائمة التنقل عندما يكون هذا العنصر هو المسار الحالي.ومع ذلك، عند الانتقال إلى طريقة عرض متداخلة داخل طريقة العرض هذه، فإن عنصر القائمة الرئيسية لم يعد نشطًا.انظر المكبس التالي:

http://plnkr.co/edit/2CoEdS?p=preview

بشكل افتراضي (أو إذا قمت بالنقر فوقه) يكون الطريق 1 "نشطًا".عندما تنقر على "إظهار القائمة"، سترى أن الطريق 1 لم يعد نشطًا.

يحرر:

الفرق الوحيد بين هذا المثال ومشروعي الفعلي هو أن قائمة التنقل في مشروعي الفعلي تحتوي على وحدة التحكم الخاصة بها وبالتالي لا تستخدم نفس النطاق مثل وحدة التحكم لـ "route1".

Answer 1

تحرير للحصول على جهاز توجيه واجهة المستخدم المحدث 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

Answer 2

لديك فهم خاطئ لـ 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>

Answer 3

يدعم جهاز التوجيه Angular UI الآن هذا محليًا.انظر الالتزام https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

Answer 4

كان الحل الخاص بي هو تعيين:

<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">

تمت إضافة الحالة مسبقًا إلى نطاق وحدة التحكم:

$scope.state = $state;

Answer 5

لا تحتاج إلى القيام بأي شيء في وحدات التحكم.هنا هو رمز المثال الخاص بي:

    <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"
            }
        }
    });

Answer 6

لقد قاموا الآن بالتحديث والطريقة الجديدة للقيام بذلك هي

 <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'
          }
        }
      });

Answer 7

لدينا بالفعل حل دون أي "اختراق" هنا

هذه هي الطريقة للقيام بما يلي:

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"
})

Answer 8

لقد جئت إلى هنا بعد عامين وتم طرح السؤال ولكن 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 ذات الصلة نشطة ، وإزالتها عندما تكون غير نشطة.تتمثل حالة الاستخدام الأساسية في تبسيط المظهر الخاص لقوائم التنقل التي تعتمد على واجهة المستخدم ، من خلال ظهور زر القائمة "النشط" في حالة مختلفة ، مما يميزها عن عناصر القائمة غير النشطة.

توثيق كامل.

Answer 9

أتمنى أن يكون هذا هو ما كنت تبحث عنه. ضع عنوان 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>

هذا كل شيء.