将 ng-click 值传递给一个控制器并在另一个控制器中使用它

Question

我正在使用一个表格，表格内的一个按钮会弹出一个模式。我想将该行中的 Id 值传递给模态控制器，以便我可以使用它将它传递给其余的 api 调用，然后在模态表中加载值。

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 的简单方法是从一个Controller 使用$rootScope 和$broadcast 和event，然后在另一个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 控制器中监听事件：

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

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

Answer 3

这种方法可以通过两种方式完成。

第一种方式是从父 rootscope 实例广播一些事件并在 $scope 元素上捕获这些事件。这种格式不被认为是一种好的编码方式。

其次，使用服务在控制器之间传递数据。是的，您目前正走在正确、干净且被广泛接受的道路上。

请记住，服务是单例的。所以一旦实例化，它就可供所有控制器使用。但是这里的挑战是，一旦您单击按钮元素，您的服务就会在服务中设置您的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 });
                  }
              });

          });