Javascript 在按钮onClick中从另一个控制器调用函数

Javascript 在按钮onClick中从另一个控制器调用函数,javascript,angularjs,Javascript,Angularjs,我试图点击一个按钮并触发另一个控制器的功能。这里重要的一点是,我有两个控制器DashboardController,其中我有一个带有按钮的datatable,通过onClick调用另一个控制器DashboardDeviceController的函数 我正在这样做,当我点击按钮时,我会打开一个新的视图,其中每个选项卡都有图表 因此,当我点击我的按钮时,我想指定它将打开的选项卡,而不是默认的活动选项卡“Consumptions” DasboardController datatableoption

我试图点击一个按钮并触发另一个控制器的功能。这里重要的一点是,我有两个控制器DashboardController,其中我有一个带有按钮的datatable,通过onClick调用另一个控制器DashboardDeviceController的函数

我正在这样做,当我点击按钮时,我会打开一个新的视图,其中每个选项卡都有图表

因此,当我点击我的按钮时,我想指定它将打开的选项卡,而不是默认的活动选项卡“Consumptions”

DasboardController
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>';

在angularjs中,要拥有可重用的功能或东西,必须创建一个服务

angular.module('myModule')
    .factory('myService', serviceFunction);

serviceFunction.$inject = [];

function serviceFunction() {
    return {
        reusableFunction1: function() {}
    };
}
在angularjs服务(或工厂)中,实现应用程序的业务逻辑。例如,您可以使用一个服务来管理身份验证。创建服务后,您可以将其注入控制器以使用其功能:

angular.module('myModule')
    .controller('myCtrl', myCtrl);

myCtrl.$inject = ['$scope', 'myService'];

function myCtrl($scope, myService) {
    myService.reusableFunction1();
}
如果您想获得更多信息,我将加入到服务和工厂官方文档的链接:


在angularjs中,要拥有可重用的功能或东西,必须创建一个服务

angular.module('myModule')
    .factory('myService', serviceFunction);

serviceFunction.$inject = [];

function serviceFunction() {
    return {
        reusableFunction1: function() {}
    };
}
在angularjs服务(或工厂)中,实现应用程序的业务逻辑。例如,您可以使用一个服务来管理身份验证。创建服务后,您可以将其注入控制器以使用其功能:

angular.module('myModule')
    .controller('myCtrl', myCtrl);

myCtrl.$inject = ['$scope', 'myService'];

function myCtrl($scope, myService) {
    myService.reusableFunction1();
}
如果您想获得更多信息,我将加入到服务和工厂官方文档的链接:


使用
广播/发射ON
进行通信

$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'
});
示例

普朗克:

可以使用angular.extend在控制器之间进行通信/链接

app.controller('DashboardController', function($scope, $controller) {
        angular.extend(this, $controller('DashboardDeviceController', {$scope: $scope}));
});

使用
广播/发射ON
进行通信

$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'
});
示例

普朗克:

可以使用angular.extend在控制器之间进行通信/链接

app.controller('DashboardController', function($scope, $controller) {
        angular.extend(this, $controller('DashboardDeviceController', {$scope: $scope}));
});

控制器之间的通信通过$emit+$on/$broadcast+$on方法完成

返回图标=“”

DashboardController
中的
setActiveTab($event)
操作中,需要调用
DashboardDeviceController
函数,如下所示

假设你有

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", {});
        }
    }
]); 

控制器之间的通信通过$emit+$on/$broadcast+$on方法完成

返回图标=“”

DashboardController
中的
setActiveTab($event)
操作中,需要调用
DashboardDeviceController
函数,如下所示

假设你有

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", {});
        }
    }
]); 
贝萨特的想法是, 首先,您需要检查控制器的优先级,如 它们是通信:

1.亲子沟通

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.孩子与家长之间的沟通:

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
});
贝萨特的想法是, 首先,您需要检查控制器的优先级,如 它们是通信:

1.亲子沟通

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.孩子与家长之间的沟通:

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
});


然后使用$scope,我可以访问controllerScope.getActiveTab和controllerScope.setActiveTab,对吗?我只需要在setActiveTab内的botton ng click中传递一个参数??我试图在DashboardController var object=angular.extend(这个,$controller('DashboardDeviceController',{$scope:$scope}))中执行此操作,但对象返回{}不要分配它。您可以直接在主控制器中使用它。或者使用广播/发射方法。就像我在帖子中说的那样,我尝试使用emit和on,但我无法通过按钮传递事件。。。因此,我正在尝试另一种解决方案。我尝试过这样做,在$scope中,我有一个带有json对象的activeTab属性,然后在$scope中,我可以访问controllerScope.getActiveTab和controllerScope.setActiveTab,对吗?我只需要在setActiveTab内的botton ng click中传递一个参数??我试图在DashboardController var object=angular.extend(这个,$controller('DashboardDeviceController',{$scope:$scope}))中执行此操作,但对象返回{}不要分配它。您可以直接在主控制器中使用它。或者使用广播/发射方法。就像我在帖子中说的那样,我尝试使用emit和on,但我无法通过按钮传递事件。。。因此,我正在尝试另一种解决方案。我尝试这样做,在$scope中,我有一个activeTab属性,其中有一个json对象,可能与myb按钮中的可能重复项相同。我想传递我要更改的选项卡的名称。。而不是我编辑我的按钮的事件,你可以。您需要将DashboardController函数中的名称传递给DashboardDeviceController我们可以通过聊天更好地解释我现在拥有的吗??请显示与您在stackoverflow中聊天?通过您可以在myb按钮中的评论,我想传递我要更改的选项卡的名称。。而不是我编辑我的按钮的事件,你可以。您需要将DashboardController函数中的名称传递给DashboardDeviceController我们可以通过聊天更好地解释我现在拥有的吗??plsHow在stackoverflow中与您聊天?通过评论,您可以