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

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

新老客户大回馈,云服务器低至5折

 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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue-cli 安装sass 和 font-awesome 笔记

下一篇:【Dojo 1.x】笔记2 使用服务器环境及使用模块