@gowrisankar509 wrote:
Hi Guys,
i am new to ionic.now i am try to create slide menu in ionic app.its working good in normal pages.
But when i am integrate slide menu to tabs page.it not working.These is my code in app.js.Please give me instructions.Ionic Starter App// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' // 'starter.services' is found in services.js // 'starter.controllers' is found in controllers.js angular.module('starter', ['ionic', 'starter.controllers', 'starter.controllers1', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleLightContent(); } }); }) .config(function($ionicConfigProvider) { $ionicConfigProvider.tabs.position('bottom'); }) .config(function($stateProvider, $urlRouterProvider) { // Ionic uses AngularUI Router which uses the concept of states // Learn more here: https://github.com/angular-ui/ui-router // Set up the various states which the app can be in. // Each state's controller can be found in controllers.js console.log($stateProvider); console.log($urlRouterProvider); $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'templates/menu.html', controller: 'AppCtrl' }) .state('app.tabs', { url: "/tab", abstract: true, views: { 'menu-content': { templateUrl: "templates/tabs.html", } } }) .state('app.search', { url: '/search', views: { 'menuContent': { templateUrl: 'templates/search.html' } } }) .state('app.browse', { url: '/browse', views: { 'menuContent': { templateUrl: 'templates/browse.html' } } }) .state('app.login', { url: '/login', //views: { // 'tab-login': { views: { 'menuContent': { templateUrl: 'templates/tab-login.html', controller: 'LoginCtrl' } } // } //} }) .state('app.playlists', { url: '/playlists', views: { 'menuContent': { templateUrl: 'templates/playlists.html', controller: 'PlaylistsCtrl' } } }) .state('app.single', { url: '/playlists/:playlistId', views: { 'menuContent': { templateUrl: 'templates/playlist.html', controller: 'PlaylistCtrl' } } }) .state('app.tab.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/tab-dash.html', style: 'standard', position: 'bottom', controller: 'DashCtrl' } } }) .state('app.tab.chats', { url: '/chats', views: { 'tab-chats': { templateUrl: 'templates/tab-chats.html', style: 'standard', position: 'bottom', controller: 'ChatsCtrl' } } }) .state('app.tab.chat-detail', { url: '/chats/:chatId', views: { 'tab-chats': { templateUrl: 'templates/chat-detail.html', controller: 'ChatDetailCtrl' } } }) .state('app.tab.video', { url: '/video', views: { 'tab-video': { templateUrl: 'templates/tab-video.html', controller: 'MediaCtrl' } } }) .state('app.tab.account', { url: '/account', views: { 'tab-account': { templateUrl: 'templates/tab-account.html', style: 'standard', position: 'bottom', controller: 'AccountCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('app/login'); });controller
angular.module('starter.controllers', []) .controller('DashCtrl', function($scope) {}) .controller('MediaCtrl', function($scope, $ionicModal) { $scope.allImages = [{ 'src' : 'img/pic1.jpg' }, { 'src' : 'img/pic2.jpg' }, { 'src' : 'img/pic3.jpg' }]; $scope.showImages = function(index) { $scope.activeSlide = index; $scope.showModal('templates/tab-image.html'); } $scope.showModal = function(templateUrl) { console.log(templateUrl); console.log(templateUrl); $ionicModal.fromTemplateUrl(templateUrl, { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; $scope.modal.show(); }); } // Close the modal $scope.closeModal = function() { $scope.modal.hide(); $scope.modal.remove() }; $scope.clipSrc = 'img/VID-20150909-WA0003.mp4'; $scope.playVideo = function() { $scope.showModal('templates/video-popover.html'); } }) .controller('ChatsCtrl', function($scope, Chats) { // With the new view caching in Ionic, Controllers are only called // when they are recreated or on app start, instead of every page change. // To listen for when this page is active (for example, to refresh data), // listen for the $ionicView.enter event: // //$scope.$on('$ionicView.enter', function(e) { //}); $scope.chats = Chats.all(); $scope.remove = function(chat) { Chats.remove(chat); }; }) .controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) { $scope.data = {}; $scope.login = function() { LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) { $scope.data.username=""; $scope.data.password=""; $state.go('app.playlists'); }).error(function(data) { var alertPopup = $ionicPopup.alert({ title: 'Login failed!', template: 'Please check your credentials!' }); }); } }) .controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { $scope.mainCtrl = {}; $scope.leftButtons = [{ type: 'button-icon button-clear ion-navicon', tap: function(e) { $ionicSideMenuDelegate.toggleLeft($scope.$$childHead); } }]; $scope.mainCtrl.showFeature = false; }) .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) { $scope.chat = Chats.get($stateParams.chatId); }) .controller('AccountCtrl', function($scope) { $scope.settings = { enableFriends: true }; }) .controller('AppCtrl', function($scope, $ionicModal, $timeout) { // With the new view caching in Ionic, Controllers are only called // when they are recreated or on app start, instead of every page change. // To listen for when this page is active (for example, to refresh data), // listen for the $ionicView.enter event: //$scope.$on('$ionicView.enter', function(e) { //}); // Form data for the login modal $scope.loginData = {}; // Create the login modal that we will use later $ionicModal.fromTemplateUrl('templates/login.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); // Triggered in the login modal to close it $scope.closeLogin = function() { $scope.modal.hide(); }; // Open the login modal $scope.login = function() { $scope.modal.show(); }; // Perform the login action when the user submits the login form $scope.doLogin = function() { console.log('Doing login', $scope.loginData); // Simulate a login delay. Remove this and replace with your login // code if using a login system $timeout(function() { $scope.closeLogin(); }, 1000); }; }) .controller('PlaylistsCtrl', function($scope) { $scope.playlists = [ { title: 'Reggae', id: 1 }, { title: 'Chill', id: 2 }, { title: 'Dubstep', id: 3 }, { title: 'Indie', id: 4 }, { title: 'Rap', id: 5 }, { title: 'Cowbell', id: 6 } ]; }) .controller('PlaylistCtrl', function($scope, $stateParams) { });tabs.html
<!-- Create tabs with an icon and label, using the tabs-positive style. Each tab's child <ion-nav-view> directive will have its own navigation history that also transitions its views in and out. --> <ion-tabs class="tabs-icon-bottom tabs-color-active-positive"> <!-- Dashboard Tab --> <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Chats Tab --> <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab> <!-- Account Tab --> <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> <ion-tab title="Video" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/app/tab/video"> <ion-nav-view name="tab-video"></ion-nav-view> </ion-tab> </ion-tabs>tab dashboard html
<ion-view view-title="Dashboard"> <ion-content class="padding"> <div class="list card"> <div class="item item-divider">Recent Updates</div> <div class="item item-body"> <div> There is a fire in <b>sector 3</b> </div> </div> </div> <div class="list card"> <div class="item item-divider">Health</div> <div class="item item-body"> <div> You ate an apple today! </div> </div> </div> <div class="list card"> <div class="item item-divider">Upcoming</div> <div class="item item-body"> <div> You have <b>29</b> meetings on your calendar tomorrow. </div> </div> </div> </ion-content> </ion-view>
Posts: 1
Participants: 1