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

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

 1 <!doctype html>
 2 <html ng-app="app">
 3 <head>
 4     <title>使用$provide自定义服务</title>
 5 <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
 6 </head>
 7 <body>
 8     <div ng-controller="ctr1">
 9         <div class="show">
10             服务返回的值:<br>
11             <span>姓名:{{info('name')}}</span><br>
12             <span>性别:{{info('sex')}}</span><br>
13             <span>年龄:{{info('score')}}</span><br>
14             <span>小明的信息:{{val}}</span>
15         </div>
16     </div>
17     <script type="text/javascript">
18         var m1= angular.module('app', [], function ($provide) {
19             $provide.factory('$output', function () {
20                 var stu = {
21                     name: '张三',
22                     sex: '',
23                     score: '60'
24                 };
25                 return stu;
26             });
27             $provide.value("myval","33333");
28             $provide.service("myservice",function(){
29                 return {
30                     name:"小明",
31                     age:18
32                 }
33             })
34         });
35         m1.controller('ctr1', function ($scope, $output,myval,myservice) {
36             $scope.info = function (n) {
37                 for (var _n in $output) {
38                     console.log(_n);  // 打印key
39                     if (_n == n) {
40                         return ($output[_n]);
41                     }
42                 }
43             };
44             $scope.val=myservice;
45         });
46     </script>
47 </body>
48 </html>

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

    name

  name

  sex

  name

  sex

  score

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

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

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

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

posted @ 2017-02-07 22:26  阿宝smile  阅读(4177)  评论(5编辑  收藏  举报