Ion-Nav-Buttons access to $scope

ionic-v1
1

Is it possible to have a button that is defined within my ion-nav-buttons to call a function defined on $scope? It doesn’t seem to work for me. I want the user to be able to click a button in the nav to launch a modal. Any help or advice would be appreciated.

index.html

<body ng-app="unigApp">
    <!-- The nav bar that will be updated as we navigate -->
    <ion-nav-bar class="bar-dark nav-title-slide-ios7">
        <ion-nav-back-button class="button-icon">
            <i class="ion-chevron-left"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>

    <!-- where the initial view template will be rendered -->
    <ion-nav-view animation="slide-left-right-ios7">
    </ion-nav-view>
</body>

find.html

<ion-view title="Find an Agent">
    <ion-nav-buttons side="right">
        <button ng-click="settings.open()" class="button button-icon icon ion-gear-a"></button>
    </ion-nav-buttons>
    <ion-content ng-controller="FindAgentCtrl">
        <form ng-submit="search()">
            <div class="list list-inset">
                <label ng-show="isZipSearch" class="item item-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input ng-model="searchParams.zipCode" type="text" placeholder="Zip Code" pattern="[0-9]*" maxlength="5">
                </label>
                <button ng-disabled="isSearching" type="submit" class="button button-block button-positive">
                    <span ng-hide="isSearching">Search</span> <i ng-show="isSearching" class="icon ion-loading-c">
                    </i>
                </button>
            </div>
        </form>
    </ion-content>
</ion-view>
2

That should work as intended, the markup looks good.
Do you have a controller for the $scope functions?

3

Yes. Everything works fine but the nav bar button. If I take that button and place it within my content, it opens the modal without a problem. I want to have the button up in the nav bar though.

4

is your stateProvider alright?

5

Yes. I was looking at this some more today. I moved the controlled from being declared in my view on the ion-content tag and placed it where I’m declaring my states. That seems to have fixed the issue.

6

You had declared the ng-controller at the ion-content level before, but your ion-nav-buttons was above that level, that’s why the “settings.open()” wasn’t being resolved correctly. Moving the controller attribution to the state declarations makes the whole template to live inside the scope of the controller, which solves the problem as expected.
You could have moved your ng-controller attribute to the ion-view to achieve the same results.

1 Like