AngularJS is it real two way data binding

Question

I 've just started to study Angular. Consider the following simple template:

<div ng-app ng-init="qty=1;cost=2">
  <div>
    Quantity: <input id="quantity" type="number" min="0" data-ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" data-ng-model="cost">
  </div>
  <div>
    Total: {{qty * cost | currency}}
  </div>
</div>

I 've tried the following in Chrome's console:

var $scope = angular.element($('#quantity')).scope();
$scope.qty; //1

By changing the first input text from 1 to 3 manually, I am getting:

$scope.qty; //3

So far, so good! First question: Why the opposite does not work? Namely,by setting $scope.qty=5; input text does not change.

Second question: By applying e.g. $('#quantity').val(12); the input text changes, however the expression in Total is not recalculated and DOM is not refreshed!

Stepan Suvorov · Accepted Answer · 2016-02-23 14:26:25Z

2

Rules of AngularJS Club:

You should not use jQuery
You should not use jQuery
If you do you do some hacks with scope in console, don't forget to run the digest circle: .

$scope.$apply()

.

P.S.: you don't need jQuery here as well:

angular.element('#quantity').scope();

answered Feb 23, 2016 at 14:26

Stepan Suvorov

26.3k27 gold badges117 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Varkal · Accepted Answer · 2016-02-23 14:27:43Z

0

Answer to both question: Angular bind after a $digest phase.

answered Feb 23, 2016 at 14:27

Varkal

1,4082 gold badges17 silver badges33 bronze badges

Comments

Charmi · Accepted Answer · 2016-02-23 14:49:58Z

0

Please see the following code. Each time the value change, it is reflected in the UI and vice versa.

HTML

<div ng-app='App'>
  <div ng-controller='AppCtrl'>
    <form ng-submit='ChangePrice()'>
      Quantity: <input id="quantity" type="number" min="0" data-ng-model="qty">
      Costs: <input type="number" min="0" data-ng-model="cost">
      Total: {{qty * cost | currency}}
      <input type='submit' value='Change Price'></input>
    </form>
  </div>
</div>

JS

 var helloApp = angular.module('App', []);
 helloApp.controller('AppCtrl', function($scope) {
    $scope.qty=10;
    $scope.cost = 2;

   $scope.ChangePrice = function(){
      $scope.cost =  $scope.cost + 1;
   }
 });

answered Feb 23, 2016 at 14:49

Charmi

6101 gold badge6 silver badges20 bronze badges

Comments

apxp · Accepted Answer · 2016-02-23 14:59:23Z

I like the other answers, but I think they are not answering your questions.

First question: Why the opposite does not work? If you just change a variable by hand over the console no framework will know about that changes. If you change the scope you should also use $scope.$apply() afterwards.

Second question: By applying e.g. $('#quantity').val(12); the input text changes, however the expression in Total is not recalculated and DOM is not refreshed! Are you sure that the DOM is not refreshed, when you apply a jQuery command on your console? This command also have the refresh inside. With that you are manipulating directly the page.

So your first command does not have a refresh inside and your second has.

Collectives™ on Stack Overflow

AngularJS is it real two way data binding

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related