关于angular框架的控制器的使用

 

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 6     <title>angular控制器的隐式声明</title>
 7     <script type="text/javascript" src="angular.min.js"></script>
 8 </head>
 9 <body>
10     <div class="box" ng-controller="myCtrol1">
11         <p>
12             <h2>这是一个通过隐式声明操作的模块</h2>
13             {{name}}
14         </p>
15         <div class="child" ng-controller="childCtrl">
16             <h3>这是子控制器</h3>
17             {{name}}
18             <p>这是第二个控制器的喜好：{{love}}</p>
19             
20         </div>
21     </div>
22     <div ng-controller="myCtrol2">
23         <h2>这是第二二二个控制器</h2>
24         {{name}}
25     </div>
26     <div ng-controller="myCtrol3" my-dir>
27         <h2>这是第三三三个控制器</h2>
28         {{name}}
29     </div>
30 </body>
31 <script type="text/javascript">
32     var app = angular.module("myApp",[]);
33         app.controller("myCtrol1",["$scope",function($scope){
34             $scope.name = "小学生开学啦";
35 
36         }])
37         //子控制器
38         app.controller("childCtrl",["$scope",function($scope){
39             $scope.name = "小花开学了";
40         }])
41         //第二个控制器
42         app.controller("myCtrol2",["$scope","$rootScope",function($scope,$rootScope){
43             $scope.name = "上学是一件哭笑不得的事情！"
44             $scope.love = "吃 吃 吃！！！"
45             $rootScope.love = $scope.love;
46         }])
47         //第三个控制器
48         app.controller("myCtrol3",["$scope",function($scope){
49             $scope.name = "回家是一件令人兴奋不已的事情！"
50         }])
51         //自定义指令
52         app.directive("myDir",function(){
53             return{
54                 restrict:"EACM",
55                 replace:true,
56                 template:"<p>这里输入的是内容,注意这里内容必须加标签</p>",
57             }
58         })
59 </script>
60 </html>

 

posted @ 2016-10-25 20:48  zmand  阅读(193)  评论(0)    收藏  举报