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

Updating Angular view model on button click

本文关键字：视图 模型 更新 按钮 单击      更新时间：2023-09-26

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

<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方法，我可以让它工作，但是使一个工作和另一个不起作用有什么区别？

你做错了。使用 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 的原因是因为角度的工作方式。即使您正在递增手动绑定事件处理程序中的值，角度也不知道更新，并且它不会使用新值更新 DOM 绑定。虽然在您的特定情况下是一种不好的做法，但您可以通过执行$scope.$apply()（但当然您需要在控制器中注入$scope）以及在事件处理程序中手动调用摘要循环来实现这一点。使用 angular 时的一般经验法则是控制器不直接访问 DOM，相反，它只是为视图设置数据，并在绑定和其他内置或自定义指令的帮助下，您可以在应用程序中获得预期的行为。

阅读有关范围生命周期和摘要周期的信息

相关文章：