当我的按钮放置在angularjs的不同控制器中时，如何在按钮单击时调用控制器功能
[英]how to call controller function on button click when my button is placed in different controller in angularjs
问题描述
I am new to AngularJS and making a single page application. 
我是AngularJS的新手，正在制作一个单页应用程序。 Please see the attached screen shot I have a dropdown in which there is an apply button and on click of this button I want to call functions that are written in different controller. 请查看所附的屏幕截图，我有一个下拉菜单，其中有一个Apply按钮，单击此按钮后，我要调用在不同控制器中编写的函数。 I have multiple dropdowns on a shell page I am attaching a screen shot of TimeLine dropdown for understanding. 我在外壳程序页面上有多个下拉菜单，我附上了TimeLine下拉菜单的屏幕快照，以供理解。 There are basically three dropdowns and they are same for every Tab that is why I've placed them in shell page. 基本上有三个下拉列表，每个选项卡都相同，这就是为什么我将它们放在shell页面中的原因。 For example, there is one dropdown that is populating all clients name from database and have checkboxes so when user select multiple checkboxes and click on Apply button the view under these dropdown should be refreshed with new data. 例如，有一个下拉列表正在填充数据库中所有客户端的名称，并具有复选框，因此，当用户选择多个复选框并单击“应用”按钮时，这些下拉菜单下的视图应使用新数据刷新。
// This controller function is used to get data from database and fill the dropdown. //此控制器功能用于从数据库获取数据并填充下拉列表。
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
}
});
Here are two different controller functions (both are updating same view) that are fetching data from database and populate a table or draw a chart based on data. 这是两个不同的控制器功能（都在更新相同的视图），它们从数据库中获取数据并根据数据填充表格或绘制图表。 All these controller functions call a generic service to get the data. 所有这些控制器功能都调用通用服务来获取数据。 My problem is that my Apply Button dropdown is placed in shell page becuase if you see image no. 我的问题是，如果看到图像编号，我的“应用按钮”下拉列表会放在外壳页面中。 2 there are tabs on the page and this "Timeline" dropdown is same for all Tabs (On click of every tab there is a view loaded and its functions called and display table or draw charts on 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;
});
});
4 个解决方案
解决方案1
1 已采纳 2016-11-22 07:11:51
<!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>
解决方案2
0 2016-11-22 06:43:13
您可以将controller as vm技术，这（从理论上来说）使您可以使用所有给定名称的控制器访问所有子作用域， 这里是有关此技术的文章。
解决方案3
0 2016-11-22 06:53:07
from you shell page controller, broadcast the event whenever the filter is applied. 从您的Shell页面控制器中，在应用过滤器时广播事件。
$rootScope.$broadcast('UPDATE-GRAPH');
In your different tabs controller receive the broadcasted event and perform action based on that. 在您的其他选项卡中，控制器会接收广播的事件并根据该事件执行操作。
$rootScope.$on('UPDATE-GRAPH', function() {
// call update function of your controller from here
});
解决方案4
0 2016-11-22 07:13:37
Hello You can directly extend your current controller with base controller so that it will access all function of it. 您好，您可以使用基本控制器直接扩展当前控制器，以便它可以访问其所有功能。
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});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.