我是 AngularJS 的新手，正在制作单页应用程序。请查看随附的屏幕截图我有一个下拉菜单，其中有一个应用按钮，单击此按钮我想调用在不同 Controller 中编写的函数。我在 shell 页面上有多个下拉菜单，我附上了 TimeLine 下拉菜单的屏幕截图以供理解。基本上有三个下拉菜单，每个选项卡都相同，这就是我将它们放在 shell 页面中的原因。例如，有一个下拉菜单从数据库中填充所有客户名称并具有复选框，因此当用户选择多个复选框并单击“应用”按钮时，这些下拉菜单下的 View 应使用新数据刷新。
//此 Controller 函数用于从数据库中获取数据并填充下拉列表。
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
}
});
这里有两个不同的 Controller 函数(都在更新相同的 View )，它们从数据库中获取数据并根据数据填充表格或绘制图表。所有这些 Controller 函数都调用通用服务来获取数据。我的问题是我的应用按钮下拉菜单被放置在 shell 页面中，因为如果您看到图像编号。 2 页面上有选项卡，这个“时间轴”下拉列表对于所有选项卡都是相同的(单击每个选项卡都会加载一个 View ，并调用其功能并在 View 上显示表格或绘制图表)。
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>关于javascript - 当我的按钮放置在angularjs中的不同 Controller 中时如何在按钮单击时调用 Controller 功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40735288/