Ionic-framework: साइडमेनू टेम्पलेट, आयन-एनएवी-बैक-बटन, आयन-नेविकॉन और $state.go('/app/playlists');

को निर्मित 4 जन॰ 2015 · 3टिप्पणियाँ · स्रोत: ionic-team/ionic-framework

साइडमेनू टेम्पलेट में app.js में परिभाषित कई नेस्टेड राज्य हैं। जब आप नेस्टेड स्थिति में नेविगेट करते हैं (उदाहरण के लिए, 'app.single') आयन-एनएवी-बार को '< बैक' बटन के साथ अपडेट किया जाता है।

जब आप 'होम पेज' ('/ ऐप/प्लेलिस्ट') पर वापस आते हैं तो बैक बटन को आयन-नेविकॉन से बदल दिया जाता है (मेनू.एचटीएमएल देखें)। आप कंट्रोलर में एक साधारण फ़ंक्शन जोड़कर होम पेज (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'
    }
  }
})

और व्यू कंट्रोलर से गोहोम () फंक्शन को इनवाइट करें, जिसे आप होम पेज पर ट्रांजिशन करते हैं, हालांकि बैक बटन को आयन-नेविकॉन से नहीं बदला गया है?

यदि आप एक दृश्य से दूसरे दृश्य में नेविगेट करते हैं और फिर 'होम पेज' पर वापस जाते हैं तो भी यही स्थिति होती है:

http://localhost :8100/#/app/playlists (आयन-एनएवी-बार में आयन-नेविकॉन है)
http://localhost :8100/#/app/playlist/1 (आयन-एनएवी-बार में '<वापस' बटन है)
http://localhost :8100/#/app/playlist/2 (आयन-एनएवी-बार में '<वापस' बटन है)
http://localhost :8100/#/app/playlists (आयन-एनएवी-बार में '<बैक' बटन है लेकिन आयन-नेविकॉन होना चाहिए)

स्रोत

RobFerguson

सबसे उपयोगी टिप्पणी

तो आप जो वर्णन कर रहे हैं और मार्कअप वास्तव में सही है।

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 18 फ़र॰ 2015

👍6

सभी 3 टिप्पणियाँ

साइडमेनू टेम्पलेट के menu.html में:

<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>

आयन-नव-बटन आयन-नव-दृश्य का प्रत्यक्ष वंशज होना चाहिए न कि आयन-नव-बार का।

अपडेट किया गया menu.html:

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

और अद्यतन प्लेलिस्ट.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>

RobFerguson 5 जन॰ 2015

तो आप जो वर्णन कर रहे हैं और मार्कअप वास्तव में सही है।

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

आप जो वर्णन कर रहे हैं वह मेनू-बंद विशेषता के कारण होता है।

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

तो आपको इसमें थोड़ा सा जोड़ना होगा।

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

mhartington 18 फ़र॰ 2015

👍6

थैंक्स @mhartington ....
इसने मेरी समस्या हल कर दी ...

foram-patel 7 सित॰ 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ionic-framework: साइडमेनू टेम्पलेट, आयन-एनएवी-बैक-बटन, आयन-नेविकॉन और $state.go('/app/playlists');

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों