0

Two way databinding is not woking in <ion-content>. I am not able to get updated value of $scope variable ("searchKeyword" in this case). If i put the html outside the <ion-conent> then it works. I am very confused about this behavior.Below code works,

<ion-view view-title="Search" >
  <div class="bar bar-header item-input-inset" style="height:52px;">
    <label class="item-input-wrapper">
      <i class="icon ion-ios-search placeholder-icon"></i>
      <input type="search" placeholder="Search" ng-model="searchKeyword" ng-keyup="$event.keyCode == 13 ? search() : null">
    </label>
    <button class="button button-clear" ng-click="search()">
      search
    </button>
  </div>
  <ion-content scroll="true" style="margin-top:50px;" >

  </ion-content>
</ion-view>

but below does not :(

 <ion-view view-title="Search" >

      <ion-content scroll="true" style="margin-top:50px;" >
    <div class="bar bar-header item-input-inset" style="height:52px;">
        <label class="item-input-wrapper">
          <i class="icon ion-ios-search placeholder-icon"></i>
          <input type="search" placeholder="Search" ng-model="searchKeyword" ng-keyup="$event.keyCode == 13 ? search() : null">
        </label>
        <button class="button button-clear" ng-click="search()">
          search
        </button>
      </div>
      </ion-content>
    </ion-view>

Here, on search() function i don't get updated value of "searchKeyword". Below is my controller,

angular.module('myapp')
.controller('SearchController',function($scope){
$scope.searchKeyword='';
  $scope.search=function(){
    console.log('search keyword : '+$scope.searchKeyword);
  };
})
prathmesh naik
  • 1
  • 3
  • This could be because somewhere along the way, within your scope hierarchy, a child scope was created. Then when it's assigned, it creates a copy of the variable in child scope that is a copy of the variable in parent scope - two way binding broken. Try adding a "dot" in your ngModel. I.e. $scope.my.searchKeyword – Michael Kang Sep 30 '15 at 07:02
  • Initialize in your controller $scope.my = { searchKeyword:'' }; – Michael Kang Sep 30 '15 at 07:05
  • Please share your example on http://codepen.io – Bhushankumar Lilapara Sep 30 '15 at 08:02
  • Here is the download link.You will get example here, [link](https://drive.google.com/file/d/0BwZLxaWkixXbNkxrMU8tQUxvSU0/view?usp=sharing) – prathmesh naik Sep 30 '15 at 08:36
  • @pixelbits the method u told me is working (y) Thanks, but i don't understand why it is not working in regular way. I have read the case you have put in comment but i have only one controller at this point. – prathmesh naik Sep 30 '15 at 08:45

1 Answers1

2

$scope.searchKeyword in search() and ng-model refer to different scopes after the value of input has changed, because <ion-content> creates new scope. Unfortunately, for primitive values, this needs to be worked around. Please see this SO answer for deeper explanation.

Community
  • 1
  • 1
Kate Miháliková
  • 2,035
  • 15
  • 21