Help - No button functionality on nested pages. :(

ionic-v1
1

Hi, I am building a simple budgeting app and have ran into a roadblock. I am using the Ionic side menu template and am unable to click on any buttons within the app. For example, I am trying to have a third child category called fixed expenses, but the button for “Fixed Expenses” doesn’t work.

App.js

.state(‘app’, {
url: ‘/app’,
abstract: true,
templateUrl: ‘templates/menu.html’,
controller: ‘AppCtrl’
})

.state(‘app.budget’, {
url: ‘/budget’,
views: {
‘menuContent’: {
templateUrl: ‘templates/budget.html’,
controller: ‘BudgetCtrl’
}
}
})

.state(‘app.budget.fixedexpenses’, {
url: ‘/budget/fixedexpenses’,
views: {
‘menuContent’: {
templateUrl: ‘templates/fixedexpenses.html’,
}
}
})

menu.html

Screenshot:

image
Screen Shot 2017-03-13 at 9.55.23 AM.png854×698 39.9 KB

This is unfortunately happening on all my pages associated with MenuContent. Could you help me to determine why none of my buttons work on nested child views? Thank you!

Best wishes,
Ben

2

Hi @benzelkin. Your Problem is that the state app.budget.fixedexpenses has no defined controller. If you need to use similar functionalities to the parent state just use the parent controller. i.e.

.state('app.budget.fixedexpenses', {
  url: '/budget/fixedexpenses',
  views: {
    'menuContent': {
      templateUrl: 'templates/fixedexpenses.html',
      controller: 'BudgetCtrl' // This is missing
    }
  }
});

The compiled url for the code above to navigate to Child state app.budget.fixedexpenses will be /app/budget/budget/fixedexpenses. Please try navigating there and updating the screenshot.

1 Like
3

Thanks so much for your help, Nathan. Unfortunately, that hasn’t worked. For some reason, it doesn’t even look like a button on the screen.

Is there a problem with my my controller or budget.html page?

controllers.html:
.controller(‘BudgetCtrl’, function($scope, $stateParams) {
})

The budget.html has a button linking to href="#/app/budget/fixedexpenses"

Thanks again for your help!

Best wishes,
Ben

4

If we compile the url it’ll result to #/app/budget/budget/fixedexpenses

.state('app.budget.fixedexpenses', {
  url: '/fixedexpenses', // Change that so we can have #/app/budget/fixedexpenses
  views: {
    'menuContent': {
      templateUrl: 'templates/fixedexpenses.html',
      controller: 'BudgetCtrl'
    }
  }
});

Please fix that. Best to put it up on a pen, fiddle or plunker so we can see where the bug is.

1 Like
5

Hey Nathan, the compile worked for the URL when I put it into my test browser (http://10.0.88.28:8100/#/app/budget/fixedexpenses). Thank you!

I guess one of the issues now is that the button on the budget.html page doesn’t actually act like a button (is there a problem with how my menuContent is setup?).

Also, when I type in the /app/budget/fixedexpenses into the URL, it just takes me to the budget.html output.

Thanks as well for all your help. Really appreciative as I’m new and thoroughly stuck although really enjoying this. Also, tried plunker, but may take a few minutes to get use to it.

Best wishes,
Ben

6

I think I figured something out. I believe the main problem is that I am trying to use the side menu view in addition to the tabs view, so it’s not recognizing any of the buttons on the tab view. Is there a better way to do this?

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

<ion-tabs class="tabs-icon-top tabs-color-active-positive">


  <!-- Budget Tab -->
  <ion-tab title="Budget" icon-off="ion-podium" icon-on="ion-podium" href="#/app/budget">
    <ion-nav-view name="budget"></ion-nav-view>
  </ion-tab>

  <!-- Transactions Tab -->
  <ion-tab title="Transactions" icon-off="ion-ios-cart" icon-on="ion-ios-cart" href="#/app/transactions">
    <ion-nav-view name="transactions"></ion-nav-view>
  </ion-tab>

</ion-tabs>
7

Hey benzelkin. It’s possible to use both side menus and tabs. Yes. I see the problem now. the ion-nav-view cannot be a child of the ion-nav-bar directive. You need to set this up in a different template so that you have something like Tabs Inside Side Menu plunker
UPDATE
or Side Menu Inside Tabs plunker

1 Like
8

Wow, this is so helpful, Nathan! Thank you!

Okay, I have another question related to something else, which I am stuck on! :frowning: I am trying to add “Add Transaction” functionality to the app, but my ng-click doesn’t seem to go anywhere. Basically, I’d like to have the transaction amount, date, merchant and category added to the transactions list when each is submitted. I have researched quite a bit on how to have this functionality, but still hitting snags.

Here’s my code in plunker: https://plnkr.co/edit/Ue8ruZu0dqibKbpy4HNr?p=preview (hope this works okay). The index.html page is the “Add transaction” page and the transactions.html page is the list that I am trying to add the transaction too.

Thank you again, Nathan!

Best wishes,
Ben

9

Hey @benzelkin.
Here is an updated version of your plunker. I urge you to take many more tutorials and practice on ui-router and ionic. Scopes seem to be the main issue here. Pluralsight has very rich Angular & Ionic content.

1 Like
10

This works so well! Thanks, I agree that I need more tutorial work, so I’ll go back to the drawing board. Thanks again!