Question

在我的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 Bootstrap模式。

怎么做？

我知道在一个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>

但是这里的click事件是我的controller.js文件然后如何打开模态？

Answer 1

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

您的模板：

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

在gridOptions中使用模板。

$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
    })
}

单击UI Grid上的链接时的Bootstrap Modal

1 个答案: