私のボタンがangularjs内の別のコントローラに置かれているときに、ボタンをクリックしてコントローラの機能を呼び出す方法

私はAngularJSを初めて使用し、1ページのアプリケーションを作成します。添付のスクリーンショットを参照してください適用ボタンがあり、このボタンをクリックすると、別のコントローラで書かれた機能を呼びたいと思うドロップダウンがあります。シェルページに複数のドロップダウンがあります。私は、理解のためにTimeLineドロップダウンのスクリーンショットを添付しています。基本的に3つのドロップダウンがあり、それらはすべてのタブで同じです。なぜなら、それらをシェルページに配置した理由です。たとえば、データベースからすべてのクライアント名を入力するドロップダウンが1つあり、複数のチェックボックスを選択して[適用]ボタンをクリックすると、これらのドロップダウンの下のビューを新しいデータで更新する必要があります。私のボタンが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つの異なるコントローラ機能（両方が同じビューを更新している）です。これらのコントローラー関数はすべて、汎用サービスを呼び出してデータを取得します。私の問題は、画像番号が表示された場合は、[適用ボタン]ドロップダウンがシェルページに配置されていることです。 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

これは、ページを読み込む際に初めてうまく動作しますが、同じview/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内の別のコントローラに置かれているときに、ボタンをクリックしてコントローラの機能を呼び出す方法

答えて

関連する問題