我正在尝试了解 Angular 数据绑定(bind)的工作原理。我创建了这个在 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()" 并在 Controller 中创建一个 values.Increment 方法，我可以让它工作，但是一个有效而另一个无效的区别是什么？
最佳答案
你做错了。使用 Angular 时，您不需要为此目的绑定(bind)事件处理程序/访问 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 工作方式。即使您在手动绑定(bind)的事件处理程序中递增值，angular 也不知道更新并且它不会使用新值更新 DOM 绑定(bind)。尽管在您的特定情况下是一种不好的做法，但您可以通过执行 $scope.$apply() 来实现。 (但当然你需要在你的 Controller 中注入(inject) $scope)以及在事件处理程序中手动调用摘要循环。使用 Angular 时的一般经验法则是 Controller 不直接访问 DOM，相反，它只是为 View 设置数据，并借助绑定(bind)和其他内置或自定义指令，您可以在应用程序中获得预期的行为。
关于javascript - 单击按钮更新 Angular View 模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28017704/