angularjs--------作用域讲解

2018-06-24 01:38:29来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>作用域的讲解</title>
 6     <script src="../bower_components/angular/angular.min.js"></script>  <!-- 引入angular -->
 7   </head>
 8   <body  ng-app="app">
 9       {{haha}}
10       <div ng-controller="ctrl">    <!-- 控制器ctrl -->
11           {{name}}                  <!--  这里为小潘 -->
12           {{age}}                   <!-- 这里为200 -->
13           {{haha}}                 <!--  这里为 鸣人 -->
14       </div>
15       <div ng-controller="ctrl2">   <!-- 控制器ctrl2 -->
16           {{name}}                  <!--  这里为小西 -->
17           {{age}}                   <!--  这里为188 -->
18           {{haha}}                 <!--  这里为鸣人 -->
19       </div>
20     <script>
21     // var obj = {}
22     // obj.name = 'ddd';
23     // console.log(obj.name)
24     // console.log(age)
25     //定义 app模块
26     angular.module('app',[])         /*先找到模块 app*/
27     .controller('ctrl',function($scope,$rootScope){        /* 找到控制器ctrl*/
28         $scope.name="小潘！"                        
29         $scope.age = 200;                       /*它的作用域仅限于ctrl控制器的那一部分*/
30         $rootScope.haha = '鸣人！';            /*它的作用域是为全局的*/
31     })
32     
33     .controller('ctrl2',["$scope",function($scope){   //不同的写法，第二个参数是一个数组
34         $scope.name = '小西';
35         $scope.age = 188;
36     }])
37 
38     </script>
39 
40   </body>
41 </html>