2014-12-19 69 views
0

說我在我的網頁以下兩條指令:指令到指令通信角

<todos></todos> 
<calendar></calendar> 

的文件結構設置如下:

/待辦事項

  • 待辦事項-controller.js

  • todo-directive.js

  • 待辦事項-view.html

/日曆

  • 日曆controller.js

  • 日曆directive.js

  • 日曆view.html

由於這兩個指令是「在同一水平上」,一個不包含其他內,這並不讓我使用要求的語法在我的指令做這樣的事情在待辦事項控制器:

CalendarCtrl.foo() 

現在我使用大量的廣播和聽衆,它變得非常混亂。我如何更輕鬆地共享這些功能並保持我的文件結構相同?

+0

製作'/ scheduling'模塊,其中'/ todos'和'/ calendar'是子模塊。然後你可以有schedule-service.js。儘管我會讓控制器與調度服務進行交談,然後將指令範圍擴展到控制器。 – 2014-12-19 06:55:45

+0

只需使用您在兩個指令中注入的通用服務。 – dfsq 2014-12-19 06:57:12

+0

[AngularJS中的Directive-to-directive通信?](http:// stackoverflow。com/questions/16628616/directive-to-directive-communication-in-angularjs) – 2014-12-19 06:58:29

回答

1

文件/目錄結構並不重要。您的指令文件(calendar-directive.js,todo-directive.js)應該在瀏覽器中正確加載,您可能會通過index.html(腳本標記)加載該文件。您必須正確定義模塊,其依賴關係和指令。例如

angular.module('mainModule', []); 

angular.module('mainModule').directive('calendar' ['service1', 'service2', function(service1, service2) { 

}]); 

angular.module('mainModule').directive('todo' ['service1', 'service2', function(service1, service2) { 
return { 
restrict: 'AE', 
... 
require: '^calendar', 
... 
link : function($scope, element, attrs, CalendarCtrl) { 
CalendarCtrl.foo(); 
} 
} 
}]); 

要在另一個指令中使用指令,必須在DDO(目錄定義對象)中正確使用'require'。它的控制器將作爲第四個參數注入到鏈接函數中。請注意,這兩個指令都在同一模塊中,'mainModule',並且它們的目錄結構不重要。

+0

如果todo不是todo,我將如何要求^日曆在日曆裏面還是下面? – Rigil 2014-12-19 07:15:07

+0

你在你的指令控制器與服務之間進行通信...一個角度服務是一個單獨的存儲數據並可以從你的控制器的任何範圍訪問......你可以使用服務或工廠... – 2014-12-19 07:18:23

+0

@Neo所以如果我想在todo的日曆控制器中設置一些範圍變量,我可以使用服務來做到這一點?例如。在待辦事項控制器內部,我可以說TheNewService.setSomeCalenderScope('我的價值'),它會適用於日曆控制器的範圍? – Rigil 2014-12-19 07:21:51

0

如果你只想分享兩個控制器之間的值,你可以用一個服務,或者工廠做...

如果要觸發第二個控制器的情況下,調用上的第一控制器,您可以定義一個事件並通過您的$ rootScope通過您要發送的數據進行廣播。在我的例子中,我的事件名爲'changeMyEntryEvent',數據是一個字符串'myNewEntry'。

app.controller('firstController', function ($scope,$rootScope) { 

     $rootScope.$broadcast('changeMyEntryEvent', 'myNewEntry'); 

}); 

app.controller('secondController', function ($scope,$rootScope) { 

     $rootScope.$on('changeMyEntryEvent', function (event, data) { 
       //Execute your code on second Controller, triggered by firstController 
     }); 

}); 
+0

即時通訊使用大量的廣播和聽衆,因爲它和我試圖停止這樣做,因爲它變得混亂。 – Rigil 2014-12-19 07:31:05

+0

它變得混亂? :-)好吧,但我不認爲有另一種解決方案觸發另一個控制器上的事件?!? – 2014-12-19 07:35:00

+0

多數民衆贊成在一個無賴,因爲我有它的方式現在設置指令是自包含的,我可以將它們放到任何頁面上的任何路線,而不必擔心依賴關係。當然,我面臨的問題是所有的廣播/聽衆正在變得麻煩。 – Rigil 2014-12-19 09:03:14