I'm trying to click on a button and trigger a function of another controller. The important part here is that I have two controllers DashboardController where I have a datatable with a button and with a onClick I call a function of the other Controller named DashboardDeviceController.
I'm doing this so when I click on the button I will open a new view with tabs where each tab will have graphs.
So I want when I click on my button to specify the tab which it will be open instead of "Consumptions" which is the active tab by default.
DasboardController
button inside datatableoptions
return icon = '<center><a class="state-link" data-state-id="' + data.id + '" ng-click="setActiveTab(\"consumptions\")"><i style="color:#ff0000; width:21px; height:21px" title="Consumptions threshold exceed" class="fa fa-warning"></i></a></center>';
and I try to do this but didnt work..
$rootScope.$on("setActiveTab", function(name, obj, event){
$scope.parentmethod(name, obj);
});
$scope.parentmethod = function(name, obj, event) {
// task
console.log("name ",name);
var btn = event.currentTarget;
obj[btn.id]=true;
console.log("btn ", btn);
activeTab = name;
}
DashboardDeviceController
controllerScope.activeTab = {
consumptions: true,
network : false,
ap : false,
modem : false,
system : false,
};
controllerScope.getActiveTab = function () {
console.log("getActiveTab()");
var activeTab = null;
for(var tabName in controllerScope.activeTab) {
if (controllerScope.activeTab[tabName]) {
activeTab = tabName;
break;
}
}
return activeTab;
}
controllerScope.setActiveTab = function (name) {
console.log("setActiveTab()");
var activeTab = null;
for(var tabName in controllerScope.activeTab) {
if (controllerScope.activeTab[tabName] == name) {
controllerScope.activeTab = name;
break;
}
}
}
In angularjs , to have a reusable function or things, you have to create a service.
angular.module('myModule')
.factory('myService', serviceFunction);
serviceFunction.$inject = [];
function serviceFunction() {
return {
reusableFunction1: function() {}
};
}
In angularjs service (or factory) implement the buisiness logic of your application. You can have a service to manage authentication for example. After create your service(s), you can inject it in your controller to use his functions:
angular.module('myModule')
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$scope', 'myService'];
function myCtrl($scope, myService) {
myService.reusableFunction1();
}
I join links to service and factory official documentation if you want to get more:
Use BROADCAST/EMIT an ON
to communicate
$scope.$emit('myCustomEvent', 'Data to send');
// firing an event downwards
$scope.$broadcast('myCustomEvent', {
someProp: 'Sending you an Object!' // send whatever you want
});
// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
console.log(data); // 'Data to send'
});
EXAMPLE
plunkr: https://plnkr.co/edit/WemGxPytLLmPulml8xjK?p=preview
OR
You can use angular.extend to communicate/link between controllers
app.controller('DashboardController', function($scope, $controller) {
angular.extend(this, $controller('DashboardDeviceController', {$scope: $scope}));
});
Communication between controllers is done though $emit + $on / $broadcast + $on methods.
return icon = '<center><a class="state-link" data-state-id="' + data.id + '" ng-click="setActiveTab($event)"><i style="color:#ff0000; width:21px; height:21px" title="Consumptions threshold exceed" class="fa fa-warning"></i></a></center>';
In the action of setActiveTab($event)
in DashboardController
you need to call the DashboardDeviceController
function like below
Let's say you have
app.controller('DashboardDeviceController', ['$scope', '$rootScope'
function($scope) {
$rootScope.$on("CallParentMethod", function(){
$scope.parentmethod();
});
$scope.parentmethod = function() {
// task
}
}
]);
app.controller('DashboardController', ['$scope', '$rootScope'
function($scope) {
$scope.setActiveTab = function(event) {
$rootScope.$emit("CallParentMethod", {});
}
}
]);
The besat idea is this, First you need to check the priority of your controller, like They are communication :
1.parent to child communication
then do in your parent controller $scope.$broadcast('name',{objkey:value});
then do in your child controller $scope.$on('name',function(event,args){
//console the args params
});
2.child to parent communication:
then do in your child controller $scope.$emit('name',{objkey:value});
then do in your parent controller $scope.$on('name',function(event,args){
//console the args params
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.