無法停止AngularJS中的路由控制器之間的事件傳播
[英]Can't stop event propagation between route controllers in AngularJS
問題描述
我正在使用Angular Route用公共父控制器封裝的路由構建SPA。 在父控制器內部，有一個按鈕將發出一個事件，該事件應該被所有子/路由控制器捕獲，每個控制器都決定如何處理它。
我希望此事件由父控制器發出一次，並由每個子/路由控制器接收一次。 我的http://plnkr.co/edit/9twoe6WO3eLQzVDatrC0?p=preview在這里顯示嘗試失敗。
該代碼段的問題在於，每當發生路線導航時，同一子級/路線控制器就會再接收一次該事件。
PS：來自Plunker的代碼
HTML
<body ng-controller="MainCtrl">
<ng-view></ng-view>
<button ng-click="navigate()">Propagate</button>
<script type="text/ng-template" id="viewIndexCtrl.html">
<p>this is index page</p>
</script>
<script type="text/ng-template" id="viewPackageCtrl.html">
<p>this is package page</p>
</script>
</body>
JS
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/index', {
controller: 'viewIndexCtrl',
templateUrl: 'viewIndexCtrl.html'
}).when('/package', {
controller: 'viewPackageCtrl',
templateUrl: 'viewPackageCtrl.html'
}).otherwise({
redirectTo: '/index'
});
}
]);
app.controller('MainCtrl', function($scope, $location, $rootScope) {
$scope.navigate = function() {
var route = location.href.indexOf('index') > -1 ? 'package' : 'index';
$location.path('/' + route);
$rootScope.$emit('navigate');
};
});
app.controller('viewIndexCtrl', function($scope, $rootScope) {
$rootScope.$on('navigate', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('event reached index');
});
});
app.controller('viewPackageCtrl', function($scope, $rootScope) {
$rootScope.$on('navigate', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('event reached package');
});
});
1 個解決方案
解決方案1
0 已采納 2014-11-16 09:04:04
- 您需要使用
$broadcast而不是$emit。 - 您將監聽器放在
$rootScope，每當破壞控制器時，它的作用域也會被破壞，因此它的所有范圍監聽器都會自動刪除，但是當您將監聽器放在$rootScope您需要手動刪除它們。 代碼中發生的事情是，每次路由更改時，您都將一個偵聽器附加到$rootscope而不刪除先前的偵聽器。 如果您將使用控制器的本地$scope，則無需執行任何操作。
這可能是您需要的（ plunker ）：
app.controller('MainCtrl', function($scope, $location, $rootScope, $timeout) {
$scope.navigate = function() {
var route = location.href.indexOf('index') > -1 ? 'package' : 'index';
$location.path('/' + route);
// $location.path happens only after the digest cycle so we must wait for it..
$timeout(function() {
$rootScope.$broadcast('navigate');
});
};
});
app.controller('viewIndexCtrl', function($scope, $rootScope) {
$scope.$on('navigate', function(e) {
console.log('event reached index');
});
});
app.controller('viewPackageCtrl', function($scope, $rootScope) {
$scope.$on('navigate', function(e) {
console.log('event reached package');
});
});
如何停止AngularJS中的事件傳播
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.