I don't want to share data between controller. I just want to trigger controller C when i click either tab A or tab B.
<body ng-controller="MainController">
<div class="div1" ng-controller="ControllerA" ng-click="changeTab('tab1')">
...
</div>
<div class="div2" ng-controller="ControllerB" ng-click="changeTab('tab2')">
...
</div>
<div class="div3" ng-controller="ControllerC">
...
</div>
</body>
How this can be done ? Any idea ?
You can use events, where $scope.$parent.$broadcast is a closest path between sibling controllers:
angular.module('app', [])
.controller('ControllerA', ['$scope', function($scope){
$scope.changeTab = function(tab){
$scope.$parent.$broadcast('myevent', tab);
}
}])
.controller('ControllerC', ['$scope', function($scope){
$scope.counter = 0;
$scope.$on('myevent', function(event, tab){
$scope.tab = tab;
$scope.counter++;
});
}])<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="app">
<div class="div1" ng-controller="ControllerA" ng-click="changeTab('tab1')">
Click ControllerA
</div>
<div class="div2" ng-controller="ControllerC">
ControllerB({{tab}}): {{counter}}
</div>
</body>$emit is way better that $broadcast : You can call controllers like following code. You can send data as well. Try this .
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"></button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
function sendData($scope) {
var arrayData = [1,2,3];
$rootScope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $rootScope) {
$rootScope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
or the simplest but not recommended way :
<div ng-app="myApp">
<div class="div1" ng-controller="ControllerA" ng-show="tab1" ng-click="changeTab('tab1')">
...
</div>
<div class="div2" ng-controller="ControllerB" ng-show="tab2" ng-click="changeTab('tab2')">
...
</div>
<div class="div3" ng-controller="ControllerC">
...
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.tab1 = true;
$rootScope.tab2 = false;
});
app.controller('ControllerA', function($scope, $rootScope) {
$scope.changeTab = function (tab) {
$rootScope.tab1 = true;
$rootScope.tab2 = false;
}
});
app.controller('ControllerB', function($scope, $rootScope) {
$scope.changeTab = function (tab) {
$rootScope.tab1 = false;
$rootScope.tab2 = true;
}
});
app.controller('ControllerC', function($scope, $rootScope) {
});
</script>
Inject $rootScope on your controller and on changeTab() you can call
$rootScope.$broadcast('key', true);
and on the second controller ControllerC listen to that like
$scope.$on('key', function(response) {
//code you want to run here
});
$rootScope.$broadcast