ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
192 stars 187 forks source link

With ng-model-option, ng-click fires before model update #300

Open potatopeelings opened 7 years ago

potatopeelings commented 7 years ago

Short description of the problem:

If I have a field with ng-model-options={ updateOn; 'blur' }, updating this field and then clicking a button runs the button's ng-click before the model is updated.

This happens only on Ionic. On a web page with the same code, Angular runs the button's ng-click after the model is updated.

What behavior are you expecting?

Angular behavior should remain the same with or without Ionic - i.e. the model must be updated before the ng-click handler is fired.


Plunker that shows an example of your issue

http://plnkr.co/edit/72HFv5WUSJRhoFd4Bo1a?p=preview

Steps to reproduce:

  1. Update the textbox to 102
  2. Click the button

Relevant code

ionic start myApp tabs

tab-dash.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" ng-model="model.myValue" ng-model-options="{ updateOn: 'blur' }" >
        </label>
        <button class="button" ng-click="showMyValue()">Show Value</button>
      </div>
    </div>
  </ion-content>
</ion-view>

controllers.js

...
.controller('DashCtrl', function($scope) {
  $scope.model = {
    myValue: 10
  }
  $scope.showMyValue = function() {
    alert($scope.model.myValue);
  }
})
...

Which Ionic Version? 1.x

Run ionic info from terminal/cmd prompt:

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Gulp CLI : CLI version 3.9.1 Local version 3.9.1

local packages:

    Ionic Framework : ionic1 1.3.3

System:

    Node : v6.9.5
    npm  : 3.10.8
    OS   : Windows 7
remisture commented 6 years ago

Sounds like this is the same as I experience in my app: https://stackoverflow.com/questions/40447971/how-to-update-ng-model-before-ng-click-fires-in-ionic-angular