Using $scope inside navBar

ionic-v1
1

here is my view where my search bar appears when search button is clicked.

  <ion-nav-buttons side="right">
        <div class="searchBar">
          <div class="searchTxt" ng-show="show">
              <div class="bgdiv"></div>
              <div class="bgtxt">
                <input type="search" placeholder="What are you looking for?" ng-change="search()" ng-model="query" >
              </div>
            </div>
            <button class="button button-balanced button-clear" ng-click="show=!show">
            <i class="ion-android-search"  style="font-size: 28px; color: #fff"></i>
            </button>
        </div>
  </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

When user starts type in characters inside the search bar, ng-change event gets triggered! And search() function in the controller will be executed.

$scope.search = function() {
console.log('inside search function ’ + $scope.query);
}

the scope variable “query” in the template is not getting updated in the controller. Can you @leob or @coreelements help to fix it?

2

First of all you’re haveing two problems in your code.

The first problem is your using primitive variables in your scopes. Most of the time they will not work. Ionic is using a lot of child scopes and that’s what causing your problem.

Replace this:

$scope.query;

<input type="search" placeholder="What are you looking for?" ng-change="search()" ng-model="query" >

with this:

$scope.inputs = {
    query: ''
}

<input type="search" placeholder="What are you looking for?" ng-change="search()" ng-model="inputs.query" >

This is called dot notation. You need to know how it works in Ionic Framework so read this article.

The second problem is a possible one. I’m not sure if you’re even going make it work with dot notation. In some cases navBar requires a controller of its own. And to share data between two controllers you will need to use a service/factory.

So try my first suggestion, if you can’t make it work then do the other one.

2 Likes
3

Thank ya @Gajotres for your response. The dot notation solved the issue. Wow!