將ng單擊值傳遞給一個控制器並在另一個控制器中使用它

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方式和$broadcast一個event從一個Controller並聽取它在其他Controller

因此，無需編寫額外的服務sharedProperties

事情是這樣的： -

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

在PortFolioController控制器，你可以這樣做：

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

和在OrderController控制器中收聽事件：

你10

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

也可以使用AngularJS Service Passing Data Between Controllers to see some examples

Answer 3

這種方法可以用兩種方式來完成。

第一種方法是從父根目錄實例中廣播一些事件並捕獲$ scope元素上的內容。這種格式不被認爲是一種很好的編碼方式。其次，要在控制器之間進行數據通信使用一項服務。是的，你目前在右邊，清理&被廣泛接受的路徑。

請記住，服務singletons.so一旦instansiated它是提供給所有controllers.But這裏的挑戰是，只要你按鈕元素點擊你的服務在service.Now設置您idValue如何第二控制器知道。答案是註冊一個$ watch服務來觀察服務中的idValue是否改變如下。

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

      });