AngularJS控制器



上节课家庭作业回顾


在一个ng-app当中去定义两个控制器。


代码


2.png


执行结果


3.png



AngularJs中的控制器


1.定义两个控制器;


2.控制器间的通讯:继承方式通讯、基于事件方式(广播、向上传播、向下传播)。


代码


<!doctype html>
<html ng-app="lesson" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 6
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
 
  </head>
  <body>
<div  ng-controller="MomCtrl">
<h1>{{Name}}</h1>
<h2>{{Location}}</h2>
<button ng-click="ChangeHouse()">换房子</button>
<div style="margin-top:50px;" ng-controller="MeCtrl">
<h1>{{Name}}</h1>
<h2>{{Location}}</h2>
<h4>{{Mobile}}</h4>
</div>
<div style="margin-top:50px;" ng-controller="GfCtrl">
<h1>{{Name}}</h1>
<h4>{{Mobile}}</h4>
<button ng-click="Call()">打电话</button>
</div>
</div>
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("MomCtrl",function($scope){
$scope.Name="我是大伟他妈";
$scope.Location="幸福屯大队一组51号";
$scope.ChangeHouse = function(){
$scope.Location= "光荣街道69号202室";
}
$scope.$on("callDaWei",function(){
$scope.$broadcast("yourGfCall");
});
});
app.controller("MeCtrl",function($scope){
$scope.Name="我是大伟";
$scope.Mobile="待机";
$scope.$on("yourGfCall",function(){
$scope.Mobile = "GF来电";
//TODO
});
});
app.controller("GfCtrl",function($scope){
$scope.Name="我是大伟的女朋友";
$scope.Mobile="待机";
$scope.Call = function(){
$scope.Mobile = "呼叫大伟";
$scope.$emit("callDaWei");
};
});
</script>
  </body>
</html>


执行结果


4.png



本课小结


1.上节课家庭作业回顾,在一个ng-app当中去定义两个控制器;


2.控制器间的通讯(重点):继承方式通讯、基于事件方式(广播、向上传播、向下传播);


3.希望大家多动手操作。



作业


在AngularJs中定义一个控制器,而这个控制器当中,是一个简单的表单。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部