ng-clickの値を1つのコントローラに渡し、別のコントローラで使用します。

Question

テーブルを使用しています。テーブル内のボタンはモーダルをポップアップします。その行のId値をモーダルコントローラに渡して、それを残りのAPIコールに渡してからモーダルテーブルにvalusをロードすることができます。

App.js

var app = angular.module("UiApp", ["ServiceApp"]); 

app.service('sharedProperties', function() { 
    var idValue = 'test string value'; 

    return { 
     getId: function() { 
      return idValue; 
     }, 
     setId: function (value) { 
      idValue = value; 
     } 
    } 
}); 

app.controller("PortFolioController", function ($scope, GetPortfolios,sharedProperties) { 
    $scope.Portfolios = GetPortfolios.query({ pmid: 2 }); 
    console.log($scope.Portfolios); 
    $scope.addOrder = function (id) { 
     sharedProperties.setId(id) 
    }; 
}); 

app.controller("OrderController", function ($scope, GetOrders,sharedProperties) { 

    $scope.item = sharedProperties.getId(); 
    $scope.Orders = GetOrders.query({ id: item}); 
}); 

Service.js

var app = angular.module("ServiceApp", ["ngResource"]); 

    app.factory('GetPortfolios', function ($resource) { 
     return $resource("http://localhost:61347/api/PortfolioManager/GetPortfolios/"); 
    }); 

    app.factory('GetOrders', function ($resource) { 
     return $resource("http://localhost:61347/api/PortfolioManager/GetPortfolioOrders/"); 
    }); 

HTML

<div > 
             <table class="table table-striped table-hover table-bordered" id="editable-sample" ng-controller="PortFolioController"> 
              <thead> 
               <tr> 
                <th>Portfolio ID</th> 
                <th>Portfolio Name</th> 
                <th>Portfolio Type</th> 
                <th>Portfolio Description</th> 
                <th>Show Stocks</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr class="" ng-repeat="portfolio in Portfolios"> 

                <td>{{portfolio.portfolioId}}</td> 
                <td>{{portfolio.portfolioName}}</td> 
                <td>{{portfolio.type}}</td> 
                <td>{{portfolio.description}}</td> 
                <td> <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" ng-click="addOrder(portfolio.portfolioId)" >Show <i class="fa fa-info-circle"></i></button></td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 

           </div> 
           <!--Modal start--> 

           <div class="modal fade" id="myModal" role="dialog"> 
            <div class="modal-dialog"> 

             <!-- Modal content--> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal">&times;</button> 
               <h4 class="modal-title">My Portfolio</h4> 
              </div> 
              <div class="modal-body"> 
               <h3>Stock List</h3> 
               <div class="space15"></div> 
               <table class="table table-striped table-hover table-bordered" id="editable-sample" ng-controller="OrderController"> 
                <thead> 
                 <tr> 
                  <th>Symbol</th> 
                  <th>Stock Name</th> 
                  <th>Quantity</th> 
                  <th>Market Price</th> 
                 </tr> 
                </thead> 
                <tbody> 
                 <tr class="" ng-repeat="order in Orders"> 
                  <td>{{order.symbol}}</td> 
                  <td>{{order.executedQuantity}}</td> 
                  <td>{{order.price}}</td> 
                  <td>{{order.createTStamp}}</td> 
                 </tr> 

                </tbody> 
               </table> 
              </div> 
              <div class="modal-footer"> 
               <button type="button" class="btn btn-primary" data-dismiss="modal">Close <i class="fa fa-times"></i></button> 
              </div> 

Answer 1

または任意serviceは$rootScopeを使用することなくsimpleset方法及び$broadcasteventから1 Controllerそれに耳を傾ける他のController

でこのように、このようなsharedProperties

何か余分なサービスを書く必要がありません： - PortFolioControllerコントローラーで

app.controller("PortFolioController", function ($scope, GetPortfolios,$rootScope) { 
    //Other Codes 
    $scope.addOrder = function (id) { 
    $rootScope.$broadcast('ID-Clicked', { Id: id}); 
    }; 
} 

app.controller("OrderController", function ($scope, GetOrders,$rootScope) { 
    //Other Codes 
    //Listen for the event 
    $rootScope.$on('ID-Clicked', function(event, data){ 
     $scope.item = data.Id;// data.Id has the Clicked Id 
    }); 
} 

Answer 2

を、あなたが行うことができます：

$rootScope.$broadcast('eventName', id); 

とOrderControllerコントローラーでイベントを聞く：

$scope.$on('eventName', function (event, id) {...}); 

また、あなたは、このアプローチは2つの方法を使用して行うことができAngularJS Service Passing Data Between Controllers to see some examples

Answer 3

を使用することができます。

最初の方法は、親rootscopeインスタンスからのイベントをブロードキャストし、$ scope要素でキャプチャすることです。この形式は、コーディングの良い方法とはみなされません。

第2に、コントローラ間でデータをやりとりするには、サービスを使用してください。現在、あなたは現在、右側にあります。&は広く受け入れられています。

サービスはシングルトンであることを覚えておいてください。一度インスタンス化されると、すべてのコントローラが使用できるようになります。しかし、ボタンの要素をクリックすると直ちにサービスにidValueが設定されます。サービスのidValueが以下のように変更されているかどうかを調べるために、$ watchサービスを登録することになります。

app.controller("OrderController", function ($scope, GetOrders, sharedProperties) { 
       $scope.$watch(function() { 
        return sharedProperties.getId() 
       }, function (newValue, oldValue) { 
        if (newValue != oldValue) { 
         $scope.item = newValue; 
         $scope.Orders = GetOrders.query({ id: item }); 
        } 
       }); 

      });