[英]how to call controller function on button click when my button is placed in different controller in angularjs
我是AngularJS的新手，正在制作一个单页应用程序。 请查看所附的屏幕截图，我有一个下拉菜单，其中有一个Apply按钮，单击此按钮后，我要调用在不同控制器中编写的函数。 我在外壳程序页面上有多个下拉菜单，我附上了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;
});
});
<!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>
您可以将controller as vm技术，这（从理论上来说）使您可以使用所有给定名称的控制器访问所有子作用域， 这里是有关此技术的文章。
从您的Shell页面控制器中，在应用过滤器时广播事件。
$rootScope.$broadcast('UPDATE-GRAPH');
在您的其他选项卡中，控制器会接收广播的事件并根据该事件执行操作。
$rootScope.$on('UPDATE-GRAPH', function() {
// call update function of your controller from here
});
您好，您可以使用基本控制器直接扩展当前控制器，以便它可以访问其所有功能。
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});
});
如何从其他控制器AngularJS调用控制器中的函数
[英]How to call a function in a controller from a different controller AngularJS
AngularJS，如何在控制器中单击按钮时重置指令变量？
[英]Angularjs, how to reset directive variables when button clicked in controller?
如何从Rails 4应用程序中的javascript生成的按钮调用控制器功能？
[英]How to call controller function from javascript generated button in Rails 4 app?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.