Data binding only updates on onfocus/blur

Question

I have this weird, weird issue.

I apply ng-model to my input
I hit Get IP
I set the controller's property to match the ng-model
The input should update

This is what SHOULD happen. However, I have a weird issue, where the data binding won't get updated, until I unfocus/blur the input.

https://jsfiddle.net/941d7qat/

var app = angular.module('app', []);
app.controller('Controller', function() {
    this.ip = "";

    $("#getIP").on("click", () => {
        $.get("https://api.ipify.org/?format=json", (response) => {
            this.ip = response.ip;
        });
    });
});

I've worked with AngularJS for a few months now (although with TypeScript) and I've never experienced this before. I can see

Might be because the change is not happening in a digest loop. which is the angular version used — Arun P Johny, Dec 15 '16 at 02:24
@ArunPJohny How would that digest loop look like? Google has been of no help. — MortenMoulder, Dec 15 '16 at 02:27

Arun P Johny · Accepted Answer · 2016-12-15T02:32:20.487

4

There are multiple issues

Don't do dom stuff in your controller, angular already provides to ways to add click event and do ajax. So don't mix jQuery and angular code.
In your code the scope is not updated in a digest cycle that is why the input value is not getting updated

So

var app = angular.module('app', []);
app.controller('Controller', ['$http',
  function($http) {
    this.ip = "";

    this.getIP = () => {
      $http.get('https://api.ipify.org/?format=json').success((response) => {
        this.ip = response.ip;
      })
    }

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller as vm">
  <input type="text" ng-model="vm.ip" id="ip" />
  <button id="getIP" ng-click="vm.getIP()">Get IP</button>
  <br />
  <p>TEST: {{vm.ip}}</p>
</div>

edited Dec 15 '16 at 02:32

answered Dec 15 '16 at 02:30

Arun P Johny

384,651
66
527
531

So the problem is, I'm using regular jQuery instead of AngularJS' $http? – MortenMoulder Dec 15 '16 at 02:31
Awesome, so using `$http` automatically updates the values for me? – MortenMoulder Dec 15 '16 at 02:40
@MortenMoulder yes, since it is part of angularjs it knows to start the digest loop - https://www.sitepoint.com/understanding-angulars-apply-digest/ – Arun P Johny Dec 15 '16 at 02:56
That's very good to know. Thanks a lot! Still quite new to setting this up manually :) Thanks! – MortenMoulder Dec 15 '16 at 02:56

Data binding only updates on onfocus/blur

1 Answers1