AngularJS에서 라우트 컨트롤러 간의 이벤트 전파를 중지 할 수 없습니다.

각도 라우팅을 사용하여 공통의 상위 컨트롤러에 의해 캡슐화 된 경로로 SPA를 구축하고 있습니다. 부모 컨트롤러 안에는 모든 자식/경로 컨트롤러에 의해 잡히게되는 이벤트를 내보내는 버튼이 있으며, 각각의 이벤트는 어떻게 처리 할 것인지를 결정합니다.AngularJS에서 라우트 컨트롤러 간의 이벤트 전파를 중지 할 수 없습니다.

그리고이 이벤트가 상위 컨트롤러에 의해 한 번 내보내고 각 하위/경로 컨트롤러에 의해 한 번 수신되기를 바랍니다. Plunker 여기에 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'); 
    }); 
});

출처

2014-11-16 Angela

당신은 무엇이 필요 $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'); 
    }); 
});

출처

2014-11-16 09:04:04

AngularJS에서 라우트 컨트롤러 간의 이벤트 전파를 중지 할 수 없습니다.

답변

관련 문제