App not routing from modal nav menu


#1

HI there, please can someone help me.
I’m building my first ever app using Ionic.
I’m really stuck and would like a little help, I’m sure the solution will be quite simple but I’m missing it at the moment !

Here’s a quick overview of what I’m trying to do.
Rather than using the regular sidemenu, I want the menu in a modal, which I’ve done.
My problem is I need to make my modal nav menu change the information that is displayed on the app page,
when the user clicks a link in the modal menu.

I’ve managed to work out how to close / hide the menu when you click it but not how to make the state / view change.
I am a little confused , so please explain carefully and slowly.
I have read so many docs that my poor little brain is in melt down …


Here’s my code

index.html

<html ng-app="testApp">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

        <title>Ionic Example</title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">

        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <link href="css/style.css" rel="stylesheet">
        <!-- acme_one --> 
  </head>

        <body ng-controller="testAppCtrl">

    
        
           
            <ion-nav-bar class="nav-title-slide-ios7 bar-tusker" align-title="center">
              <div class="buttons">
                 <button class="button button-icon icon ion-navicon" ng-click="openModal()"></button>
              </div>               
              <ion-nav-back-button class="button-icon ion-arrow-left-c">
              </ion-nav-back-button>
            </ion-nav-bar>

            <ion-nav-view class="slide-left-right"></ion-nav-view>

          
          <script id="home.html" type="text/ng-template">
            <ion-view  title="ACME Inc App">
             <ion-content class="padding">   
                <p>Example of new mobile App content. Navigate to each area of the shiny new app.</p>
                <p>
                  <button class="button icon icon-right ion-chevron-right" ui-sref="messages">go to messages</button>
                </p>
              </ion-content> 
            </ion-view>
          </script>          
          
          <script id="messsages.html" type="text/ng-template">
            <ion-view  title="My messsages">
             <ion-content class="padding">   
                <p>This is the messages page.</p>
                <p>
                  <a class="button icon icon-right ion-chevron-right" href="#">new messages</a>
                </p>
              </ion-content> 
            </ion-view>
          </script>          

          
          <script id="settings.html" type="text/ng-template">
            <ion-view  title="Settings">
              <ion-content class="padding">
                <p>This is the settings content.</p>
                
              </ion-content>
            </ion-view>
          </script>

          <script id="info.html" type="text/ng-template">
            <ion-view title="Useful information">
              <ion-content class="padding">
                <h3>Heading goes here.</h3>
                <p>Blah blah blah.</p>
                
              </ion-content>
            </ion-view>
          </script>



            <script id="telephone.html" type="text/ng-template">
              <ion-view title="Telephone">
                <ion-content>
                  <p>This is a list of useful phone numbers ...... content to follow </p>
                  <p>wahoooo!!</p>
                </ion-content>
              </ion-view>
            </script>

            
        <script id="modal.html" type="text/ng-template">
        <div id="mainAppNav" class="modal">

            <div class="bar bar-header bar-tusker">
                <button class="button button-icon icon ion-navicon" ng-click="closeModal()"></button>
                <h1 class="title">ACME Inc App</h1>
            </div>
            <br></br>
            <br></br>

            <div class="list">
            <ion-scroll direction="y" class="wide-as-needed">
            
              <a class="item item-icon-left" href="#/home" ng-click="navLink()">
                <i class="icon ion-ios7-home"></i>
                Home
              </a>

              <a class="item item-icon-left item-icon-right" href="#/messages" ng-click="navLink()">
                <i class="icon ion-email"></i>
                My messages
                <span class="badge badge-assertive">2</span>
              </a>
              <a class="item item-icon-left" href="#/info" ng-click="navLink()">
                <i class="icon ion-information"></i>
                Useful information
              </a>
              <a class="item item-icon-left" href="#/numbers" ng-click="navLink()">
                <i class="icon ion-ios7-telephone"></i>
                Telephone numbers
              </a>
              <a class="item item-icon-left" href="#/settings" ng-click="navLink()">
                <i class="icon ion-ios7-gear"></i>
                Settings
              </a>
              </ion-scroll>
            </div>
    


        </div>
        </script>

              
              
              
          
            <script src="lib/jquery.js"></script>
            <script src="lib/fastclick.js"></script>
            
            <script src="js/app.js" type="text/javascript" ></script>            
            
            <script src="cordova.js"></script>
            
            </body>
          </html>

app.js

var acme_app = angular.module('testApp', ['ionic']);

//nav menus
acme_app.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
        $stateProvider

            .state('home', {
                url: '/home',
                templateUrl: 'home.html'
            })
            .state('messages', {
                url: "/messages",
                templateUrl: "messages.html"
               // controller: 'messagesCtrl'
            });

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

    })  
 
    .controller('testAppCtrl', function($scope, $ionicModal) {
             
  
                
                
      $ionicModal.fromTemplateUrl('modal.html', {
        scope: $scope,
        animation: 'slide-right-left'
      }).then(function(modal) {
        $scope.modal = modal;
      });

      $scope.openModal = function() {
        $scope.modal.show();
      };
      $scope.closeModal = function() {
        $scope.modal.hide();
      };
      
      //new
      $scope.navLink = function(){
          
          // change view to linked 
          
          $scope.modal.hide();
      }
      
      
      
      //Cleanup the modal when we're done with it!
      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });

  });

Please help me understand where I’ve gone wrong.
I am wondering if I’m not listening to the correct clicks as they’re out of scope in the modal window.
I’m a bit of a newbie at writing Angular and Ionic and am trying to piece this together but need a little help just now.

Thanks in advance

Steve


#2

Can you put all of this into a codepen


#3

after reading your post and looking up the code
i created this awsome http://plnkr.co/edit/xg0oOrU4kGpn1X99jGky?p=preview :smiling_imp:

there are multiple ways to do this:
1st create for each link a method, call hide and use $state.go
2nd add to your method a parameter (state name) and use $state.go

i did add a parameter to the method and called $state.go.

i hope this helps out?

optimizations

  • you don’t need a fastclick coze ionic has build-in functionality
  • try to avoid using jquery, i could do anything in my app without jquery as far. (old app used jquery)

#4

Very nice @Auro, one thing to remember is that div.modal has been changed to ion-modal-view


#5

@Auro Thank you !!

I can now see where I was going wrong. :wink:

Can I ask another question.
I had just been using Cordova until I found the Ionic framework.
With Cordova I was using jQuery.

I am puzzled by your comment about Ionic / jQuery, probably as I’m a newbie to Ionic!
Is it that Angular can do everything I need, making the addition of jQuery not required;
or is it that Angular, jQuery and Ionic don’t play well together ??

I’m trying to get myself up to speed with a new way of doing things.
I have previously built so many things with jQuery,
I guess I’m guilty of holding onto jQuery as it’s what I know !!

thanks again to all of you for your kind assistance

Steve


#6

No problem @steveh its nice to help.

you can ask as many questions as you like.

I did suggest not using jQuery because its not optimized for mobile use, on mobile you lack on Performance for jQuery or any other not optimized framework. The reason is on iOS you only get hardware acceleration when using css transitions.
Hardware acceleration means in this case GPU support. But you probably know that already.

I think most frameworks out there using jQuery as DOM manipulation. (note: I have nothing about jQuery - in my daily work im using it :-D)

First Angular and jQuery plays well together in fact angular detects jQuery and using jQuery for DOM manipulations.
If jQuery is not loaded Angular uses a lightweight framework called jqLite. As for Ionic and jQuery there is only a problem with the lasted version i think 2.x, use 1.9/1.11 and you are fine. for more support about jquery and ionic you have to ask @mhartington :smiley:

No your not guilty holding on jQuery! it is a nice framework has a lot of support (one of the best doc’s out there) and a lot of plugins. And you probably build nice things with it :smiley:

if you have questions how to change code with jQuery to not using, it just ask :smiley: