Ionic-framework: قالب Sidemenu ، زر التنقل الأيوني للخلف ، أيون navicon و $ state.go ('/ app / playlists') ؛

تم إنشاؤها على ٤ يناير ٢٠١٥  ·  3تعليقات  ·  مصدر: ionic-team/ionic-framework

يحتوي قالب sidemenu على عدة حالات متداخلة محددة في app.js. عندما تنتقل إلى حالة متداخلة (على سبيل المثال ، "app.single") يتم تحديث شريط التنقل الأيوني باستخدام زر "<رجوع".

عندما تعود إلى "الصفحة الرئيسية" ("/ app / playlists") ، يتم استبدال زر الرجوع بأيون ملاح (انظر menu.html). يمكنك أيضًا الانتقال إلى الصفحة الرئيسية (playlists.html) عن طريق إضافة وظيفة بسيطة إلى وحدة التحكم:

$scope.goHome = function() {
  $state.go('app.playlists');
};

إذا قمت بإضافة مستوى آخر من الحالة المتداخلة:

.state('app.playlists.classic-rock', {
  url: "/classic-rock",
  views: {
    'menuContent<strong i="10">@app</strong>': {
      templateUrl: "templates/classic-rock.html",
       controller: 'ClassicRockController'
    }
  }
})

واستدعاء وظيفة goHome () من وحدة التحكم في العروض التي تقوم بالانتقال إلى الصفحة الرئيسية ولكن لا يتم استبدال زر الرجوع بـ ion-navicon؟

هذا هو الحال أيضًا إذا انتقلت من طريقة عرض إلى طريقة عرض أخرى ثم عدت إلى "الصفحة الرئيسية":

  • http: // localhost : 8100 / # / app / playlists (يحتوي شريط التنقل الأيوني على أيقونة ملاحة)
  • http: // localhost : 8100 / # / app / playlists / 1 (يحتوي شريط التنقل الأيوني على زر "<رجوع")
  • http: // localhost : 8100 / # / app / playlists / 2 (يحتوي شريط التنقل الأيوني على زر "<رجوع")
  • http: // localhost : 8100 / # / app / playlists (يحتوي شريط التنقل الأيوني على زر "<رجوع" ولكن يجب أن يحتوي على رمز ملاحي أيون)

التعليق الأكثر فائدة

لذا فإن ما تصفه والترميز صحيح بالفعل.

http://codepen.io/mhartington/pen/azwojR

ما تصفه ناتج عن سمة إغلاق القائمة.

http://ionicframework.com/docs/api/directive/menuClose/

لذلك عندما تتنقل عبر القائمة الجانبية ، فإن الروابط التي لها سمة إغلاق القائمة ستمحو السجل وتمنع زر الرجوع من الظهور.

في حالتك ، أنت تتنقل عبر $state.go ، والذي لا يحتوي على المنطق الذي يوفره إغلاق القائمة.

لذلك سوف تحتاج إلى إضافة القليل إليها.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

ال 3 كومينتر

في Menu.html قالب sidemenu:

<ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
       <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
       </button>
      </ion-nav-buttons>
</ion-nav-bar>

يجب أن تكون أزرار التنقل الأيونية سليلة مباشرة لـ ion-nav-view وليس شريط التنقل الأيوني.

تم تحديث menu.html:

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
</ion-nav-bar>

و playlists.html المحدثة:

<ion-view view-title="Playlists">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
        </button>
    </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" 
          href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

لذا فإن ما تصفه والترميز صحيح بالفعل.

http://codepen.io/mhartington/pen/azwojR

ما تصفه ناتج عن سمة إغلاق القائمة.

http://ionicframework.com/docs/api/directive/menuClose/

لذلك عندما تتنقل عبر القائمة الجانبية ، فإن الروابط التي لها سمة إغلاق القائمة ستمحو السجل وتمنع زر الرجوع من الظهور.

في حالتك ، أنت تتنقل عبر $state.go ، والذي لا يحتوي على المنطق الذي يوفره إغلاق القائمة.

لذلك سوف تحتاج إلى إضافة القليل إليها.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington ....
لقد حلت مشكلتي ...

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات