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>