angular控制器通信的方式有三種:
1,利用作用域繼承的方式。即子控制器繼承父控制器中的內(nèi)容
2,基于事件的方式。即$on,$emit,$boardcast這三種方式
3,服務(wù)方式。寫一個服務(wù)的單例然后通過注入來使用
由于作用域的繼承是基于js的原型繼承方式,所以這里分為兩種情況,當(dāng)作用域上面的值為基本類型的時候,修改父作用域上面的值會影響到子作用域,反之,修改子作用域只會影響子作用域的值,不會影響父作用域上面的值;如果需要父作用域與子作用域共享一個值的話,就需要用到后面一種,即作用域上的值為對象,任何一方的修改都能影響另一方,這是因為在js中對象都是引用類型。
基本類型
function Sandcrawler($scope) {
$scope.location = "Mos Eisley North";
$scope.move = function(newLocation) {
$scope.location = newLocation;
}
};
function Droid($scope) {
$scope.sell = function(newLocation) {
$scope.location = newLocation;
}
}
// html
<div ng-controller="Sandcrawler">
<p>Location: </p>
<button ng-click="move('Mos Eisley South')">Move</button>
<div ng-controller="Droid">
<p>Location: </p>
<button ng-click="sell('Owen Farm')">Sell</button>
</div>
在一般情況下基于繼承的方式已經(jīng)足夠滿足大部分情況了,但是這種方式?jīng)]有實現(xiàn)兄弟控制器之間的通信方式,所以引出了事件的方式?;谑录姆绞街形覀兛梢岳?on,$emit,$boardcast這幾個方式來實現(xiàn),其中$on表示事件監(jiān)聽,$emit表示向父級以上的作用域觸發(fā)事件, $boardcast表示向子級以下的作用域廣播事件。
在ng中服務(wù)是一個單例,所以在服務(wù)中生成一個對象,該對象就可以利用依賴注入的方式在所有的控制器中共享。
var app = angular.module('myApp', []);
//使用factory API創(chuàng)建服務(wù)instance
app.factory('instance', function(){
return {};
});
app.controller('MainCtrl', function($scope, instance) {
$scope.change = function() {
instance.name = $scope.test;
};
});
app.controller('sideCtrl', function($scope, instance) {
$scope.add = function() {
$scope.name = instance.name;
};
});
//html
<div ng-controller="MainCtrl">
<input type="text" ng-model="test" />
<div ng-click="change()">click me</div>