当我的按钮放置在angularjs中的不同控制器中时，如何在按钮单击时调用控制器功能答案

【问题标题】：how to call controller function on button click when my button is placed in different controller in angularjs当我的按钮放置在angularjs中的不同控制器中时，如何在按钮单击时调用控制器功能
【发布时间】：2016-11-22 16:21:03
【问题描述】：

我是 AngularJS 的新手，正在制作单页应用程序。请查看随附的屏幕截图我有一个下拉菜单，其中有一个应用按钮，单击此按钮我想调用在不同控制器中编写的函数。我在 shell 页面上有多个下拉列表，我附上了 TimeLine 下拉列表的屏幕截图以供理解。基本上有三个下拉菜单，每个选项卡都是相同的，这就是我将它们放在 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

    }

    });

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

app.controller("GetChargesController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Charges Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) {
        $scope.ChargesDetails = d;
        $rootScope.loading = false;
    });


     });

    app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Payments Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) {
        $scope.PaymentsDetails = d;               
        $rootScope.loading = false;
    });


     });

【问题讨论】：

使用发出/广播事件进行控制器之间的通信

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller="sample1Controller">
   <input type="button" value="Controller1" ng-click="sample1()"/>   
</div>
<div ng-controller="sample2Controller">  
</div>
</body>
<script>
var app=angular.module("app",[]);

app.controller("sample1Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample1=function(){
$rootScope.$broadcast('message');
}
}]);

app.controller("sample2Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample2=function(){
console.log('called on click on sample1 button from controller1');
}

$scope.$on('message',function(){ $scope.sample2();});

}]);
</script>
</html>

【讨论】：

它第一次在加载页面上运行良好，但如果我再次调用 sample2controller 函数或超过 2 次，在同一个视图/html 中单击按钮。它在控制台中向我显示 $scope.sample1 不是函数的错误。

【解决方案2】：

您可以使用controller as vm 技术，这（理论上）使您可以使用您为其指定的名称访问所有子作用域中的控制器here 是有关此技术的帖子。

【讨论】：

我建议你不要提出这么大的问题，有时人们只是过去他们xD
上次我写了一个小问题，人们说这个问题对他们来说很不清楚，他们投了我的票:-( 所以我试图解释一切并分享我的代码卡住了。

【解决方案3】：

从您的 shell 页面控制器，每当应用过滤器时广播事件。

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

在您的不同标签控制器中接收广播的事件并根据该事件执行操作。

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

       // call update function of your controller from here

      });

【讨论】：

【解决方案4】：

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

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

【讨论】：