angular.jsコントローラ間の通信
2333 ワード
環境:angular.js+sastruts+apache-tomcat
先端のデザインツールを勉強しますjsの過程でこのような問題に遭遇します:angular.jsコントローラ間の通信.
いくつかの資料を見て、大体以下の解決策があります.
1.$on,$emit,$boardcastのいくつかの方法を使用して実装され、$onはイベントリスニングを表し、$emitは親以上の役割ドメインにイベントをトリガーし、$boardcastは子以下の役割ドメインにイベントをブロードキャストすることを表す.すなわち、サブコントローラの変数は$emitを介して親コントローラに伝播し、親コントローラでは$onイベントで傍受し、$boardcastを使用してイベントを子コントローラに伝播します.このレベルのコントローラでは、他のコントローラの変数を得ることができます.
controller.js
controller.js
を参照してください.
参考資料:http://www.html-js.com/article/1560
热心な先辈に感谢!本文に不正があれば指摘してください.以上です.
先端のデザインツールを勉強しますjsの過程でこのような問題に遭遇します:angular.jsコントローラ間の通信.
いくつかの資料を見て、大体以下の解決策があります.
1.$on,$emit,$boardcastのいくつかの方法を使用して実装され、$onはイベントリスニングを表し、$emitは親以上の役割ドメインにイベントをトリガーし、$boardcastは子以下の役割ドメインにイベントをブロードキャストすることを表す.すなわち、サブコントローラの変数は$emitを介して親コントローラに伝播し、親コントローラでは$onイベントで傍受し、$boardcastを使用してイベントを子コントローラに伝播します.このレベルのコントローラでは、他のコントローラの変数を得ることができます.
controller.js
function parendCtrl($scope) {
$scope.$on('requestRecall', function(e, location) {
$scope.$broadcast('executeRecall', location);
});
}
function child1Ctrl($scope) {
$scope.location = "child1Ctrl";
$scope.recall = function(location) {
$scope.$emit('requestRecall', location);
}
}
function child2Ctrl($scope) {
$scope.location = "child2Ctrl";
$scope.$on('executeRecall', function(e, location) {
$scope.location = location;
});
}
html <div ng-controller="parendCtrl">
<div ng-controller="child1Ctrl">
<p>Location: {{location}}</p>
<button ng-click="recall(location)">Recall</button>
</div>
<div ng-controller="child2Ctrl">
<p>Location: {{location}}</p>
</div>
</div>
2.ルート役割ドメイン$rootScopeを使用して実装し、子、親コントローラの変数を$rootScopeに配置してデータ共有を実現します.controller.js
function parendCtrl($scope) {
...
}
function child1Ctrl($scope, $rootScope) {
$scope.location = "child1Ctrl";
$scope.recall = function(location) {
$rootScope.rootLocation = location;
}
}
function child2Ctrl($rootScope) {
$rootScope.rootLocation = "child2Ctrl";
}
html <div ng-controller="parendCtrl">
<div ng-controller="child1Ctrl">
<p>Location: {{location}}</p>
<button ng-click="recall(location)">Recall</button>
</div>
<div ng-controller="child2Ctrl">
<p>Location: {{rootLocation}}</p>
</div>
</div>
3.Angularサービスの方法は、参照してください.を参照してください.
参考資料:http://www.html-js.com/article/1560
热心な先辈に感谢!本文に不正があれば指摘してください.以上です.