angularjs - فتح - علامات التبويب في الفيس بوك



إنشاء وجهات النظر خارج علامات التبويب أيون على الأيونية الإطار (1)

هذه هي المرة الأولى التي أجاب على سؤال هنا لذا يرجى تحمل معي.

للانتقال إلى طريقة عرض بدون شريط علامات التبويب: أزل البادئة "التطبيق" من حالة الإعدادات، لذلك لم يعد الطفل إلى الحالة المجردة الأصل (التطبيق).

.state('settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      }); 

** إذا قمت بإضافة أي ولايات بعد هذا واحد، تأكد من حذف الفاصلة المنقوطة، في حين المنقوطة يدل على النهاية.

هذا هو حل باند المعونة.
الحل الكامل لمشكلتك هو أن تبدأ مع قالب المشروع الأيونية. لحسن الحظ لديهم خيار علامات التبويب، وهو شريط علامة التبويب العالمية.

سطر الأوامر: ionic start appName tabs

هذا يجب أن تعطيك قالب البداية المناسبة مع كل ما تحتاجه. كما أن لديها عينة controlers.js، services.js، والملفات app.js حتى تتمكن من مجرد بناء من هناك. وسوف يساعدك أيضا على هيكلة المشروع بشكل صحيح لمنع البيانات غير المتوقعة من الحقن في علامتك.

المصدر 1: http://ionicframework.com/getting-started/
المصدر 2: http://ionicframework.com/docs/api/directive/ionNavView/

** مكافأة: وهناك أيضا خدعة أنيق في المصدر 2 أن يظهر لك كيفية الحفاظ على جميع القوالب داخل ملف index.html لتسريع التطبيق وتبسيط سير العمل الخاص بك.

حظا طيبا وفقك الله.

https://ffff65535.com

أنا جديد إلى الأيونية ولكن كان وقتا طويلا منذ أردت أن تحاول ذلك. أنا مجرد اللعب حولها ربما أنا لا الحصول على المفهوم الكامل.

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

وبما أنني لا أريد للمستخدم أن يفقد أي محتوى، فإن جميع المشاهدات ترث من وجهة نظر عالمية:

angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
      .state('app', {
        url: "/app",
        abstract: true,
        controller: 'AppController',
        templateUrl: "ui/modules/tabs/view.html"
      })
      .state('app.compose-text', {
        url: '/text',
        views: {
          'compose-text': {
            templateUrl: 'ui/modules/text-composer/view.html'
          }
        }
      })
      .state('app.compose-draw', {
        url: '/draw',
        views: {
          'compose-draw': {
            templateUrl: 'ui/modules/draw-composer/view.html'
          }
        }
      })
      .state('app.compose-photo', {
        url: '/photo',
        views: {
          'compose-photo': {
            templateUrl: 'ui/modules/photo-composer/view.html'
          }
        }
      })
      .state('app.settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/text');
});

angular.module('app').run(function($rootScope) {
});

بعد ذلك، تبدو tabs/view كما يلي:

<ion-nav-view name="settings"></ion-nav-view>

<ion-tabs class="tabs-assertive tabs-icon-only">
  <ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text">
    <ion-nav-view name="compose-text"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw">
    <ion-nav-view name="compose-draw"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo">
    <ion-nav-view name="compose-photo"></ion-nav-view>
  </ion-tab>
</ion-tabs>

واحد من وجهات النظر:

<ion-view title="Example" class="slide-left-right">
  <ion-nav-buttons side="left">
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
  </ion-nav-buttons>
  <ion-content padding="true">
    <h1>Text</h1>
  </ion-content>
</ion-view>

أول شيء أتساءل هو: هل هناك أي طريقة لإعادة استخدام تلك الأزرار بين جميع وجهات النظر؟ يبدو غير مجدية للحفاظ على تعريفها مرارا وتكرارا.

ولكن هذا ليس الشيء الحقيقي ™. عند النقر على الإعدادات، يتم حقن شيء ما في طريقة عرض ion-nav-view إلا أنه يحتوي على الكثير من الأشياء (التي ليست على القالب) وأيضا، فإنه لا يخفي وجهة نظر أخرى ولا علامات التبويب.

بعض لقطة الشاشة:

http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png

ماذا ينبغي أن يكون النهج الصحيح لهذا؟





ionic-framework