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

Question

我试图了解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方法，那么我可以让它工作，但是有什么区别让一个工作而另一个不工作？

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.$apply() （但是你需要在你的控制器中注入$scope ）以及在事件处理程序中手动调用摘要周期。使用angular时的常规拇指规则是控制器不直接访问DOM，而只是为视图设置数据，并且在绑定和其他内置或自定义指令的帮助下，您可以获得应用程序中的预期行为。

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

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-01-19 03:51:34

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-01-19 03:51:34

解决方案1
3 已采纳 2015-01-19 03:51:34