Javascript 当我的按钮放置在angularjs中的不同控制器中时，如何在按钮单击时调用控制器函数

我是AngularJS新手，正在制作单页应用程序。请看附带的屏幕截图，我有一个下拉列表，其中有一个应用按钮，点击这个按钮，我想调用在不同控制器中编写的函数。我在一个shell页面上有多个下拉列表，我正在附加一个时间线下拉列表的屏幕截图以供理解。基本上有三个下拉列表，每个选项卡都是相同的，这就是为什么我把它们放在shell页面中的原因。例如，有一个下拉列表填充数据库中的所有客户机名称，并且有复选框，因此当用户选择多个复选框并单击应用按钮时，这些下拉列表下的视图应使用新数据刷新

//此控制器函数用于从数据库获取数据并填写下拉列表。

 app.controller("FillDropDownController",function($scope,GetService,$rootScope){

    $rootScope.loading = true;
        // Calling Serivce Method here to get the data and fill dropdown
        $scope.GetDropDownValues = GetService.GetAll("CommonApi", "GetDropDownValues").then(function (d) {
            $scope.GetDropDowns = d;
            $rootScope.loading = false;
        });



// Here goes the function for ng-click = GetSelectedPractices() which gets the selected clients

$scope.GetSelectedPractices = function () { 
        $scope.selectedPractices = []; 
        angular.forEach($rootScope.PracticesList, function (d) { 
            if (d.selected == true) { 
                $scope.selectedClients.push(d.CLIENTNAME); 
            } 
        });  

        $scope.spanValues = $scope.selectedClients; 

    // I am stuck here that how to call controller functions for specific view

    }

    });

这里有两个不同的控制器函数（都在更新相同的视图），它们从数据库中获取数据，并根据数据填充表或绘制图表。所有这些控制器函数都调用一个通用服务来获取数据。我的问题是，我的“应用”按钮下拉列表被放置在shell页面中，因为如果您看到2号图像，页面上有选项卡，并且所有选项卡的“时间线”下拉列表都是相同的（单击每个选项卡时，都会加载一个视图，其功能称为“显示表”或“在视图上绘制图表”）

---

您可以将

控制器用作vm

技术这（理论上）允许您访问所有子作用域中的控制器，您给它的名称是关于此技术的帖子。

从您的shell page controller，每当应用过滤器时，广播事件

  $rootScope.$broadcast('UPDATE-GRAPH');

在您的不同选项卡中，控制器接收广播事件并基于该事件执行操作

 $rootScope.$on('UPDATE-GRAPH', function() {

       // call update function of your controller from here

      });

样品
var-app=angular.module（“app”，[]）；
app.controller（“sample1Controller”、[“$scope”、“$rootScope”、函数（$scope、$rootScope）{
$scope.sample1=函数（）{
$rootScope.$broadcast（'message'）；
}
}]);
app.controller（“sample2Controller”、[“$scope”、“$rootScope”、函数（$scope、$rootScope）{
$scope.sample2=函数（）{
log（'从controller1单击sample1按钮调用'）；
}
$scope.$on（'message'，function（）{$scope.sample2（）；}）；
}]);

您好，您可以使用基本控制器直接扩展当前控制器，使其可以访问其所有功能

app.controller("BaseController",function($scope){
  // all functions you willing to call
});

app.controller("ExistingController",function($scope){
  // inherit base controller, using this even though your functions are in base   // controller it will get called
   $controller('BaseController', {$scope: $scope});
});

---

使用发射/广播事件进行控制员之间的交流我建议你不要提出这么大的问题有时人们刚刚超过他们上次我写了一个小问题，人们说这个问题对他们来说非常不清楚，他们否决了我：-（因此，我试图解释一切，并分享代码以及我遇到的问题。它在加载页面上第一次运行良好，但如果我再次调用sample2controller函数或超过2次，在相同的视图/html中单击按钮。它在控制台中显示错误，$scope.sample1不是一个函数。

app.controller("BaseController",function($scope){
  // all functions you willing to call
});

app.controller("ExistingController",function($scope){
  // inherit base controller, using this even though your functions are in base   // controller it will get called
   $controller('BaseController', {$scope: $scope});
});