在单击 UI 网格上的链接时引导模式

Bootstrap Modal on clicking a link on UI Grid

本文关键字：模式链接单击 UI 网格更新时间：2023-09-26

在我的UI网格中，这是我myController.js文件中的列定义：

    { field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
    { field: 'trans_stat', displayName: 'Transaction Status' },
    { field: 'sub_trans_actn_typ', displayName: 'Sub Transaction Action Type', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' , visible : false },
    { field: 'case_key', displayName: 'Case Key', visible: true, celltemplate: '<a class="text-center" ng-href="#" ng-click="grid.appScope.setAssociateCaseModal(row)">{{COL_FIELD}}</a>' },
    { field: 'approved_by', displayName: 'Approved By', visible: false }

在这里，单击case_key链接时，应该会弹出一个 UI 引导模式。

怎么办呢？

我知道在使用按钮单击的 html 文件中，它是这样的：

            <h3>Search Transaction</h3>
            <div style="float: right; margin-top: -35px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#recentSearchesModal">Recent Searches</button></div>
        </div>
        <div class="modal fade" id="recentSearchesModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Recent Searches</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="menu_simple" ng-repeat="obj in CaseRecentSearches" style="padding:8px;">
                                <ul>
                                    <li>
                                        <a href="#" ng-click="TransactionRecentSearch(obj)" ng-model="obj"> {{obj | placeholderfunc}} </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

但是这里的点击事件是我的控制器.js文件，那么如何打开模态？

您需要修改字段的cellTemplate，然后调用 grid.appScope.openModal() 。 openModal应该位于主控制器中 $scope.openModal 下。这样做：

您的模板：

var myTemplate = "<a href='#' ng-click='grid.appScope.openModal($event, row)'>{{ row.entity.myFieldName }}</a>";

使用网格选项中的模板。

$scope.gridOptions = {
    columnDefs: [{
        field: 'myFieldName',
        displayName: 'My Field Name',
        cellTemplate: myTemplate;
    }]
};

调用模态的函数：

$scope.openModal = function (e, row) {
    //in here, you can access the event object and row object
    var myEvent = e;
    var myRow = row;
    //this is how you open a modal
    var modalInstance = $uibModal.open({
        templateUrl: '/path/to/modalTemplate.html',
        controller: MyModalCtrl,
        backdrop: 'static'
        //disable the keyboard
        //keyboard: false,
        resolve {
            //pass variables to the MyModalCtrl here
            event: function() { return myEvent; },
            row: function() { return myRow; }
        }
    });
    //call the modal to open, then decide what to do with the promise
    modalInstance.result.then(function() {
        //blah blah the user clicked okay
    },function(){
        //blah blah the user clicked cancel
    })
}