angularjs – 在Ionic Framework上创建离子选项卡外的视图
我是Ionic的新手,但是自从我想尝试它以来已经很久了.我只是在玩耍,所以也许我没有得到完整的概念.
我正在尝试做一个简单的应用程序,底部有三个选项卡,并且所有三个选项卡都有一个设置图标.当您单击该图标时,应该隐藏选项卡并显示设置屏幕. 由于我不希望用户丢失任何内容,因此所有视图都从全局视图继承: 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> 我想知道的第一件事是:有没有办法在所有视图之间重用这些按钮?似乎无用于一遍又一遍地定义它们. 但这不是真实的东西.当我点击“设置”时,会有一些东西被注入到离子导航视图中,但是它包含很多东西(不在模板上),而且它不会隐藏其他视图和标签. 一些截图: http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png 应该采用什么方法?
这是我第一次在这里回答问题所以请耐心等待.
要导航到没有标签栏的视图: .state('settings',templateUrl: 'ui/modules/settings/view.html' } } }); **如果在此之后添加任何状态,请务必删除分号,而分号表示结束. 这是一个助听解决方案. 命令行: 这应该为您提供适当的起始模板,包含您需要的一切.它还有示例controllers.js,services.js和app.js文件,因此您可以从那里构建.它还可以帮助您正确构建项目,以防止意外数据注入您的标记. 来源1:http://ionicframework.com/getting-started/ **奖励:源2中还有一个巧妙的技巧,它向您展示如何将所有模板保留在index.html文件中,以加快应用程序并简化您的工作流程. 祝好运. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |