Question

我刚开始研究Angular。请考虑以下简单模板：

<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>

我在Chrome的控制台中尝试了以下内容：

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

通过手动将第一个输入文本从1更改为3，我得到：

$scope.qty; //3

到目前为止，真好！ 第一个问题：为什么反面不起作用？即，通过设置$scope.qty=5;输入文字不会改变。

第二个问题：通过申请，例如$('#quantity').val(12);输入文本发生了更改，但Total中的表达式未重新计算且DOM未刷新！

Answer 1

AngularJS俱乐部规则：

你不应该使用jQuery
你不应该使用jQuery
如果你这样做的话一些在控制台中有范围的黑客，不要忘记运行摘要圈：

<强> $范围。$申请（）

P.S。：你也不需要jQuery：

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

Answer 2

回答这两个问题：$digest 阶段后的角度绑定。

Answer 3

请参阅以下代码。每次值更改时，它都会反映在UI中，反之亦然。

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;
   }
 });

Answer 4

我喜欢其他答案，但我认为他们没有回答你的问题。

第一个问题：为什么相反的方法不起作用？如果您只是通过控制台手动更改变量，则没有框架会知道该更改。如果您更改范围，则之后也应使用$scope.$apply()。

第二个问题：通过申请，例如$（ '＃数量'）VAL（12）。输入文本更改，但Total中的表达式不会重新计算，DOM也不会刷新！在控制台上应用jQuery命令时，您确定不刷新DOM吗？此命令也有内部刷新。这样你就可以直接操作页面了。

所以你的第一个命令内部没有刷新而你的第二个命令没有。

AngularJS是真正的双向数据绑定

4 个答案: