一、定義2個控制器
<html ng-app="lesson" >
<div ng-controller="Ctrl1">
{{Name}}
</div>
<div ng-controller="Ctrl2">
{{Name}}
</div>
<script src=”scripts/angular-1.1.1.min.js“></script>
<script>
var app = angular.module("lesson"，[]);
app.controller("Ctrl1",function($scope){
$scope.Name="控制器1";
})
app.controller("Ctrl2",function($scope){
$scope.Name="控制器2";
})
</script>
二、控制器基於繼承的方式通訊（放在控制器內部）
<html ng-app="lesson" >
<div ng-controller="MomCtrl">
{{Name}}
{{Location}}
<button ng-click="ChangeHouse()">換房子</button>
<div ng-controller="MeCtrl">
{{Name}}
{{Location}}
</div>
</div>
<script src=”scripts/angular-1.1.1.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室"
}
})
app.controller("MeCtrl",function($scope){
$scope.Name="我是大偉";
})
</script>
三、控制器基於事件的方式通訊
<html ng-app="lesson" >
<div ng-controller="MomCtrl">
{{Name}}<br/>
{{Location}}<br/>
<button ng-click="ChangeHouse()">換房子</button><br/>
<div ng-controller="MeCtrl">
{{Name}}<br/>
{{Location}}<br/>
{{Mobile}}<br/>
</div>
<div ng-controller="GFCtrl">
{{Name}}<br/>
{{Mobile}}<br/>
<button ng-click="Call()">打電話</button>
</div>
</div>
<script src=”scripts/angular-1.1.1.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") // $broadcast 下發
});
}
})
app.controller("MeCtrl",function($scope){
$scope.Name="我是大偉";
$scope.Mobile = "待機"
$scope.$on("yourGfCall",function(){ // $on 接收
$scope.Mobile = "GF來電"
})
})
app.controller("GfCtrl",function($scope){
$scope.Name="我是大偉的女朋友";
$scope.Mobile = "待機"
$scope.Call = function(){
$scope.Mobile = "呼叫大偉"
$scope.$emit("callDaWei") //向父級傳消息 // $emit 上傳
}
})
</script>