javascript - AngularJS property not bound on first call -
i'm brand new angularjs , i'm trying implement simple binding.
i have html (simplified):
<html ng-app> <div id="divcontroller" ng-controller="myctrl"> <input type="button" ng-click="getnumbers();" /> <input type="text" value="{{numbers.total}}" /> </div> </div> and controller this:
function myctrl($scope) { $scope.numbers = new object(); $scope.getnumbers = function() { $.ajax({ type: "post", url: "page.aspx/getcurrentnumbers", data: '{name: "test"}', contenttype: "application/json; charset=utf-8", datatype: "json", success: onsuccess, failure: function (response) { alert(response.d); } }); } function onsuccess(response) { var returnvalue = json.parse(response.d); alert(returnvalue.total); $scope.numbers = returnvalue; } } first time click button nothing happens, on second click input value gets updated. both times alert outputs same value.
why not bind on first click?
you're making http call outside world of angularjs using directly jquery function. angularjs can't refresh alone template based on $scope vars updates done on jquery ajax onsuccess callback ...
it's when doing second ng-click angular @ $scope variables see if changed (digest cycle)
so, correct problem: stop using jquery $.ajax , use angular internal mechanisms of $http or ngresource ($http + more features). way angular know must update templates on http success/fail
Comments
Post a Comment