AngularJs中ng-controller下的函数在调用时为什么会执行两次?

时间:2023-03-09 02:46:58
AngularJs中ng-controller下的函数在调用时为什么会执行两次?

最近在学习AngularJs的过程中,自己做了个demo,但程序运行后却发现有个地方运行不对劲,纠结了半天,也问了,也查了,但是没有一个满意的答案,所以特地贴出来,请教各位大神(先说声谢谢了!)。为了更直观的说明问题,直接贴代码:

 <!doctype html>
<html ng-app="app">
<head>
<title>使用$provide自定义服务</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctr1">
<div class="show">
服务返回的值:<br>
<span>姓名:{{info('name')}}</span><br>
<span>性别:{{info('sex')}}</span><br>
<span>年龄:{{info('score')}}</span><br>
<span>小明的信息:{{val}}</span>
</div>
</div>
<script type="text/javascript">
var m1= angular.module('app', [], function ($provide) {
$provide.factory('$output', function () {
var stu = {
name: '张三',
sex: '男',
score: '60'
};
return stu;
});
$provide.value("myval","33333");
$provide.service("myservice",function(){
return {
name:"小明",
age:18
}
})
});
m1.controller('ctr1', function ($scope, $output,myval,myservice) {
$scope.info = function (n) {
for (var _n in $output) {
console.log(_n); // 打印key
if (_n == n) {
return ($output[_n]);
}
}
};
$scope.val=myservice;
});
</script>
</body>
</html>

在第11、12、13行调用了第36行的info()函数后,按照常规逻辑,console.log(_n);后,在控制台应该打印出

   name

  name

  sex

  name

  sex

  score

但是结果出乎我的意料,程序竟然执行了两遍,我百思不解。

AngularJs中ng-controller下的函数在调用时为什么会执行两次?

我考虑着是不是AngularJs的底层就是这样运行的,我自己又试了一下,代码如下:

 m1.controller('ctr1', function ($scope, $output,myval,myservice) {
$scope.info = function (n) {
console.log(1); // 打印结果为6个1
for (_n in $output) {
console.log(_n); //打印key
console.log(1); // 打印结果为12个1
if (_n == n) {
return ($output[_n]);
}
}
};
$scope.val=myservice;
});

对于这个问题,我网上查了很多资料也问了一些高手,也没有明确的解决办法,各路大神各显神通吧,小生在这里要受教了,多谢!