Question

我试图了解Angular数据绑定的工作原理。我创建了此示例，在{{values.count}}元素中显示span：

<body ng-app="testApp" ng-controller="testCtrl as values">
    <span>Count = {{values.count}}</span>
    <button id="incr">++</button>
</body>
<script>
    testApp = angular.module("testApp", []);
    testApp.controller("testCtrl", function () {
        var values = this;
        values.count = 5;

        $("#incr").on('click', function () {
            values.count += 1;
        });
    });
</script>

如果我点击按钮，values.count会递增，但span不会更新。如果我在按钮上放置一个ng-click="values.Increment()"并在控制器中创建一个values.Increment方法，我可以让它工作，但是有什么区别让一个工作而另一个不工作？

Answer 1

你这样做是错误的。使用angular时，您不需要为此目的绑定事件处理程序/访问DOM元素。使用内置的ng-click指令。

<button ng-click="values.incr()">++</button>

和

values.incr = function(){
  values.count++;
}

你甚至可以内联，<button ng-click="values.count = values.count+1">++</button> 你的代码没有更新DOM的原因是因为angular的工作方式。即使您在手动绑定事件处理程序内增加值，angular也不知道更新，也不会使用新值更新DOM绑定。虽然在您的特定情况下是一种不好的做法，但您可以通过执行$scope.$apply()（但是当然需要在控制器中注入$scope）以及在事件处理程序中手动调用摘要周期来实现这一点。使用angular时的常规拇指规则是控制器不直接访问DOM，而只是为视图设置数据，并且在绑定和其他内置或自定义指令的帮助下，您可以获得应用程序中的预期行为。

Read about scope life cycle and digest cycle

按钮单击时更新角度视图模型

1 个答案: