如何调用按钮上的控制器功能点击当我的按钮被放置在不同的控制器中时angularjs

我是AngularJS的新用户，正在制作单页应用程序。请参阅附加屏幕截图我有一个下拉菜单，其中有一个应用按钮，单击此按钮时，我想调用在不同控制器中编写的功能。我在一个shell页面上有多个下拉列表，我附上了TimeLine下拉列表的屏幕截图以供了解。基本上有三个下拉菜单，并且它们对于每个Tab都是相同的，这就是为什么我将它们放在shell页面中的原因。例如，有一个下拉菜单填充数据库中的所有客户端名称，并具有复选框，因此当用户选择多个复选框并单击应用按钮时，应使用新数据刷新这些下拉菜单下的视图。如何调用按钮上的控制器功能点击当我的按钮被放置在不同的控制器中时angularjs

//这个控制器功能用于从数据库中获取数据，并填补了下拉。

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


    });

来源

2016-11-22 Faseeh Haris

使用发射/广播事件 –

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

来源

2016-11-22 07:11:51 Anil

它在加载页面上第一次正常工作，但如果我再次调用sample2controller函数或超过2次，在同样的视图/ html上点击按钮。它显示我在控制台中的错误$ scope.sample1不是一个函数。 –

您可以使用controller as vm技术本（理论上），您可以访问控制器在与你给它here名称的所有子范围是关于这个技术职务。

来源

2016-11-22 06:43:13

控制器之间的通讯，我建议你不要做这么大，有时人们刚刚过去的xD他们 –

我已经写了小问题，人们最后一次都在说，问题很疑问他们不清楚，他们投了我一票:-(所以我试图解释一切，并分享代码以及我卡住的地方。 –

从您的外壳页面控制器，每当应用过滤器时广播事件。

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

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

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

     // call update function of your controller from here 

     });

来源

2016-11-22 06:53:07 Deep

你好，你可以直接扩展与基本控制器的电流控制器，这样它将访问它的所有功能。

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

来源

2016-11-22 07:13:37

如何调用按钮上的控制器功能点击当我的按钮被放置在不同的控制器中时angularjs

回答

相关问题