[英]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.