在按鈕onClick中從另一個控制器調用功能

Question

我試圖單擊一個按鈕並觸發另一個控制器的功能。 這里重要的部分是我有兩個控制器DashboardController，其中有一個帶按鈕的數據表和一個onClick，我調用了另一個名為DashboardDeviceController的控制器的函數。

我這樣做是為了當我單擊按鈕時，我將打開一個帶有標簽的新視圖，其中每個標簽都會有圖形。

因此，我想在單擊按鈕時指定將打開的選項卡，而不是默認情況下為活動選項卡的“消費”。

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

我嘗試這樣做，但是沒有用..

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

Answer 1

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

如果您想了解更多信息，我會加入服務和工廠官方文檔的鏈接：

https://docs.angularjs.org/guide/services

https://docs.angularjs.org/guide/providers

Answer 2

使用BROADCAST/EMIT an 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'
});

例

plunkr： https ://plnkr.co/edit/WemGxPytLLmPulml8xjK ? p = preview

要么

您可以使用angular.extend在控制器之間進行通訊/鏈接

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

Answer 3

控制器之間的通信通過$ emit + $ on / $ broadcast + $ on方法完成。

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

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

Answer 4

besat的想法是這樣的，首先，您需要檢查控制器的優先級，例如它們是通信：

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