如果你想調用一個控制器到另一個有可用
- $ rootScope。$放出()和$ rootScope四種方法。$ broadcast()
- 如果第二個控制器是小孩,則可以使用父級子通信。
- 使用服務
- 類黑客攻擊 - 與angular.element的幫助()
1 $ rootScope $發出()和$ rootScope $廣播()
。
控制器及其作用域可能被破壞 但$ rootScope保留在應用程序中,這就是爲什麼我們要使用$ rootScope,因爲$ rootScope是所有作用域的父級。
如果您是從父執行通信的孩子,甚至孩子想與它的兄弟姐妹溝通,你可以使用$廣播
如果從孩子進行到家長的溝通,沒有invovled兄弟姐妹,那麼你可以使用$ rootScope。$發出
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjs代碼
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
在$ emit'childEmit'的上述代碼控制檯中不會調用子內兄弟姐妹,它只會在父內部調用,其中$ broadcast將在兄弟姐妹和父內部調用。這是性能進入動作的地方。如果您正在使用從兒童到父母的溝通,因爲它跳過一些髒檢查,$ emit是可取的。
2.如果第二個控制器是孩子,你可以使用兒童家長的溝通
它的最佳方法之一,如果你想做到哪裏的孩子要傳達孩子家長的溝通與直接父母那麼它不會需要任何種類的$廣播或$發出,但如果你想做從父母到孩子的溝通,那麼你必須使用服務或$廣播
例如HTML: -
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
每當你使用兒童家長的溝通,Angularjs將搜索裏面的孩子一個變量,如果不是裏面存在,那麼它就會選擇請參閱父控制器中的值。
3.使用服務
AngularJS支持「關注的分離 - 」使用服務架構的概念。服務是JavaScript的功能,只負責完成特定的任務。這使得他們的單個實體是用於使用Angularjs的依賴注入mecahnism注入維護和測試。服務。
Angularjs代碼:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
它會給輸出你好兒童世界和家長您好世界。根據服務的角度文檔單身 - 依賴於服務的每個組件獲得由服務工廠產生的單一實例的引用。
黑客4.Kind - 與angular.element的幫助()
該方法通過ID /唯一class.angular.element()方法返回獲取從元素範圍()元素和作用域()給另一個變量的$ scope變量使用一個控制器的$ scope變量在另一個內部不是一個好習慣。
HTML: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs: -
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
在上面的代碼中的控制器都出現了HTML的自身的價值,當你將點擊的文本,你會在終端也隨之得到的值。如果您單擊父控制器跨度,瀏覽器將控制孩子的值,反之亦然。
這谷歌組螺紋,https://groups.google.com/d/topic/angular/m_mn-8gnNt4/discussion,討論了5種方式控制器能夠彼此交談。 –
有很好的答案已經在這裏,所以我只是想指出的是,對於特定用例所提到的,也許是一個AngularJS過濾器會是一個更好的解決辦法?只是以爲我會提到它:) –