解释奇怪的Angular的表达行为

Question

有人可以向我解释为什么我两次以下代码alert message？

<div ng-app="scopeExample" ng-controller="MyController as ctrl"> 
    <input id="box" ng-model="ctrl.num"> {{ctrl.show_num()}}
</div>

<script>
angular.module('scopeExample', [])
.controller('MyController', MyController);

function MyController() {
     this.num=12;
}

MyController.prototype.show_num=function(){
    alert(this.num);
};
</script>   

Answer 1

AngularJS在每个摘要循环中多次评估页面中的所有表达式，直到结果稳定。

你所看到的是完全正常的。

但表达式不应该有警告或修改值等副作用。

Answer 2

这是一个傻瓜 - https://run.plnkr.co/wFWMLiO9mqQu2LlU/

它会为您运行两次，因为事件（DOMContentLoaded）也会传播到所有父元素。在这种情况下，它只包含<div>标记。如果将其嵌套在其他标签下，则会触发更多次。

您应该使用角度$ scope而不是原型并使用此变量。