Question

我想使用angular modal进行CRUD操作，因此为了触发模态，我们在modalFire中有ng-controller="ModalDemoCtrl"个按钮，这是我的模态：

    <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">....</h3>
        </div>
        <div class="modal-body">
            <form id="productForm" novalidate>
                <div>
                    <label for="ProductName"> productName :</label>
                    <input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />

                </div>
                <div style="margin:10px">
                    <label for="Price">price :</label>
                    <input type="text" name="Price" id="Price" ng-model="model.Price" />
                </div>
            </form>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">save</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <button type="button" id="modalFire" class="btn btn-default modalBtn" ng-click="open()">UpdateProduct</button>
</div>

和它的控制器：

 App.controller('ModalDemoCtrl', function ($scope, $modal) {


    $scope.open = function (size) {

        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
    };
});

 App.controller('ModalInstanceCtrl', function ($scope, $modalInstance,  $http) {      
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

我有一个显示ProductList的网格：

    <div ng-controller="ProductController" ng-init="GetAllProducts()">
    <div class="row" style="margin-top:90px" ng-show="!ShowGrid">
        <article class="widget">
            <header class="widget__header">

                <div class="widget__title">
                    <i class="pe-7s-menu"></i><h3>ProductList</h3>
                </div>
                <div class="widget__config">
                    <a href="#"><i class="pe-7f-refresh"></i></a>
                    <a href="#"><i class="pe-7s-close"></i></a>
                </div>
            </header>

            <div class="widget__content table-responsive">

                <table class="table table-striped media-table">
                    <thead style="background-color:rgba(33, 25, 36,0.1)">
                        <tr>

                            <th style="width:30%">price</th>
                            <th style="width:30%">productName</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="product in Products">

                            <td>{{product.Price}}</td>
                            <td>{{product.ProductName}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </div>
</div>

所以，我希望有一种方法可以为网格中的每一行添加button或<a> element，可以触发模态，有什么办法吗？

Answer 1

除非我误解了您的问题，否则为什么不将按钮添加到表格中的ng-repeat。例如：

<table class="table table-striped media-table">
    <thead style="background-color:rgba(33, 25, 36,0.1)">
        <tr>
            <th>Price</th>
            <th>ProductName</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="product in Products">
            <td>{{product.Price}}</td>
            <td>{{product.ProductName}}</td>
            <td><button ng-click="loadItem(product)>Edit</button></td>
        </tr>
    </tbody>
</table>

然后在控制器内部，将产品传递到模态加载功能中。例如：

$scope.loadItem = function(product){
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            product: function () {
                return product;
            }
        }
    });
};

了解如何将产品传递给函数，然后使用resolve将产品传递到模式中。在模态控制器中，您可以将产品附加到$scope，并像使用任何其他视图一样使用它。

是否可以从另一个控制器中的按钮触发按钮元素的点击？

1 个答案: