angular 控制器之間的通訊

1, 利用作用域的繼承方式

由於作用域的繼承是基於js的原型繼承方式，所以這裡分為兩種情況，當作用域上面的值為基本型別的時候，修改父作用域上面的值會影響到子作用域，反之，修改子作用域只會影響子作用域的值，不會影響父作用域上面的值；如果需要父作用域與子作用域共享乙個值的話，就需要用到後面一種，即作用域上的值為物件，任何一方的修改都能影響另一方，這是因為在js中物件都是引用型別。

基本型別

function
sandcrawler
($scope)}
function
droid
($scope)}
// html
<
div ng
-controller
="sandcrawler"
>
<
p>
location:}
p>
<
button ng
-click
="move('mos eisley south')"
>
move
<
/button>
location: }
p>
<
button ng
-click
="sell('owen farm')"
>
sell
<
/button>
div>
div>

物件

function
sandcrawler
($scope);
}function
droid
($scope)}
// html
<
div ng
-controller
="sandcrawler"
>
<
p>
sandcrawler
location:}
p>
<
div ng
-controller
="droid"
>
<
button ng
-click
="summon('owen farm')"
>
summon
sandcrawler
<
/button>
div>
div>

2, 基於事件的方式

在一般情況下基於繼承的方式已經足夠滿足大部分情況了，但是這種方式沒有實現兄弟控制器之間的通訊方式，所以引出了事件的方式。基於事件的方式中我們可以裡面作用的$on,$emit,$boardcast這幾個方式來實現，其中$on表示事件監聽，$emit表示向父級以上的作用域觸發事件， $boardcast表示向子級以下的作用域廣播事件。參照以下**：

向上傳播事件

function
sandcrawler
($scope));
}function
droid
($scope)}
// html
<
div ng
-controller
="sandcrawler"
>
<
p>
sandcrawler
location:}
p>
<
div ng
-controller
="droid"
>
<
p>
droid
location:}
p>
<
button ng
-click
="summon()"
>
summon
sandcrawler
<
/button>
div>
div>

向下廣播事件

function
sandcrawler
($scope)}
function
droid
($scope));
}//html
<
div ng
-controller
="sandcrawler"
>
<
p>
sandcrawler
location:}
p>
<
button ng
-click
="recall()"
>
recall
droids
<
/button>
droid location: }
p>
<
/div>
div>

從這個用法我們可以引申出一種用於兄弟控制間進行通訊的方法，首先我們乙個兄弟控制中向父作用域觸發乙個事件，然後在父作用域中監聽事件，再廣播給子作用域，這樣通過事件攜帶的引數，實現了資料經過父作用域，在兄弟作用域之間傳播。這裡要注意的是，通過父元素作為中介進行傳遞的話，兄弟元素用的事件名不能一樣，否則會進入死迴圈。請看**：

兄弟作用域之間傳播

function
sandcrawler
($scope));
}function
droid
($scope
)$scope
.$on
('executedroidrecall'
,function
());
}// html
<
div ng
-controller
="sandcrawler"
>
<
div ng
-controller
="droid"
>
<
h2>r2-
d2<
/h2>
droid location: }
p>
<
button ng
-click
="recalladddroids()"
>
recall
alldroids
<
/button>
div>
<
div ng
-controller
="droid"
>
<
h2>c-
3po<
/h2>
droid location: }
p>
<
button ng
-click
="recalladddroids()"
>
recall
alldroids
<
/button>
div>
div>

3, angular服務的方式

在ng中服務是乙個單例，所以在服務中生成乙個物件，該物件就可以利用依賴注入的方式在所有的控制器中共享。參照以下例子，在乙個控制器修改了服務物件的值，在另乙個控制器中獲取到修改後的值：

var
=angular
.module(,
);.factory
('instance'
,function
();});
.controller
('mainctrl'
,function
($scope
,instance);
});.
controller
('sidectrl'
,function
($scope
,instance);
});//html
<
div ng
-controller
="mainctrl"
>
<
input type
="text"ng-
model
="test"
/>
<
div ng
-click
="change()"
>
click me
<
/div>
div>
<
div ng
-controller
="sidectrl"
>
<
div ng
-click
="add()"
>
my name 
}div
>
div>

angular 控制器之間的通訊

angular 控制器之間的通訊

控制器之間的通訊

angular中實現控制器之間傳遞引數的方式

相關推薦