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

在PortFolioController控制器中，您可以执行以下操作：

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

并在OrderController控制器中监听事件：

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

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

Answer 2

或没有任何service的简单方法是从$rootScope使用$broadcast和event Controller并在另一个Controller中使用sharedProperties 1}}

因此，无需编写额外服务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 }); }

这样的事情： -

{{1}}

Answer 3

这种方法可以使用两种方式完成。

第一种方法是从父类根示例实例广播一些事件，并在$ 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 });
                  }
              });

          });

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

3 个答案: