فشل جهاز توجيه واجهة المستخدم في تحديث عنوان URL في شريط العناوين بعد تغيير الحالة بنجاح

Question

أقوم بإنشاء تطبيق Angular صغير وأستخدم حاليًا جهاز التوجيه ui.

لقد واجهت مشكلة تبدو وكأنها خطأ كبير في جهاز توجيه واجهة المستخدم ولكن لا يمكنني التأكد لأنني لست على دراية بهذه المكتبة.عندما ينقر المستخدم على رابط معين، على الرغم من تحميل حالة العرض الصحيحة كما هو متوقع، لا يتم تحديث عنوان URL الموجود في شريط العناوين.

أنا أستخدم جهاز توجيه واجهة المستخدم ui-sref التوجيه لإنشاء عنوان URL للحالة تلقائيًا.على سبيل المثال، في عرض قائمة التحقق، أستخدم الكود التالي:

<a ui-sref="checklist-phase({ aircraftId: checklist.aircraft, checklistId: checklist.id, phaseSlug: checklist.phases[0].slug })" ng-bind="checklist.name"></a>

لقد قمت بقص تطبيقي وتحويله إلى Plunker لذا نأمل أن تتكرر المشكلة من قبل الآخرين.ويمكن ملاحظة المشكلة أيضًا في هذا الفيديو: https://www.youtube.com/watch?v=EW9CFe6LfCw

خطوات الاستنساخ:

1. اذهب إلى http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
2. انقر على الرابط الأول.لاحظ أن العرض يتم تحديثه لإظهار الحالة الصحيحة، ولكن يظل عنوان URL كما هو /#/aircraft/1/checklists.

والأمر الغريب هو أن العودة إلى هذه الحالة بوسائل أخرى يؤدي إلى تحديث عنوان URL بشكل مثالي.على سبيل المثال (بافتراض اتباع الخطوتين 1 و 2 أعلاه):

1. قم بالتمرير إلى الأسفل وانقر فوق Next Phase وصلة.لاحظ أن الحالة تتغير ويتم تحديث عنوان URL.
2. قم بالتمرير لأسفل على طريقة العرض الجديدة هذه وانقر فوق Previous Phase.لاحظ أنه يتم إعادة تحميل الحالة السابقة، ولكن تم تحديث عنوان URL هذه المرة بشكل صحيح.

هل أستخدم ui-router بشكل غير صحيح أو أفعل شيئًا آخر بشكل غير صحيح للتسبب في هذا السلوك؟

Answer 1

يفحص هنا نسخة محدثة

على ولايتك 'check-lists' قمت بتوفير ui-sref ل 'checklist-phase'

<a ui-sref="checklist-phase({ aircraftId: ...

و ال 'checklist-phase' يتم تعريفها على أنها حالة فرعية لـ 'checklist-detail'

.state('checklist-phase', {
    parent: 'checklist-detail',

والدولة 'checklist-detail' لديه وحدة تحكم تستدعي $state.go

.state('checklist-detail', {       
    controller: 'ChecklistDetailCtrl',
    ...

    .controller('ChecklistDetailCtrl', function ($scope.... 
    {

        $state.go('checklist-phase', {
            phaseSlug: checklistData.phases[0].slug
        }, {
            location: 'replace'
        });

لا تفعل ذلك...فقط قم بإزالة $state.go - لأنك تنتقل بالفعل إلى checklist-phase (انظر السطر الأول أعلاه) ...افحصها هنا