如何調用按鈕上的控制器功能點擊當我的按鈕被放置在不同的控制器中時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

回答

相關問題