javascript - 将 ng-click 值传递给一个 Controller 并在另一个 Controller 中使用它

Question

我正在使用一个表格，表格内的按钮会弹出一个模式。我想将该行中的 Id 值传递给模态 Controller ，以便我可以使用它将它传递给其余 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});
});

服务.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 Controller 中，您可以执行以下操作:

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

并监听 OrderController Controller 中的事件:

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

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