Question

我是AngularJS的新手并制作单页应用程序。请参阅随附的屏幕截图我有一个下拉列表，其中有一个应用按钮，点击此按钮我想调用用不同控制器编写的功能。我在shell页面上有多个下拉列表我附上TimeLine下拉列表的屏幕截图以便理解。基本上有三个下拉列表，它们对于每个Tab都是相同的，这就是我将它们放在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

    }

    });

以下是两个不同的控制器功能（两者都在更新相同的视图），它们从数据库中获取数据并填充表格或根据数据绘制图表。所有这些控制器函数都调用通用服务来获取数据。我的问题是，如果您看到图像号，我的应用按钮下拉列表将被放置在shell页面中。 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;
    });


     });

Answer 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>

Answer 2

您可以使用controller as vm技术（理论上）使您可以访问所有子范围内的控制器，并为您提供名称here是关于此技术的帖子。

Answer 3

来自shell shell控制器的

，无论何时应用过滤器，都会广播该事件。

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

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

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

       // call update function of your controller from here

      });

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

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

4 个答案: