Question

由于我是Angular的新手，我一定是犯了一些愚蠢的错误。请解释错误原因。

我有一个模态弹出窗口，我们可以通过提供输入搜索条件并点击QuickCaseSearch按钮来搜索案例。

<div ng-controller="CaseSearchCtrl">
    <div ng-show="case.togglePleaseWait">
        <div class="refresh" style="padding:15px;width:100%;height:100px;">
            <h4>Please wait....</h4>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading text-center">
            Case Search
        </div>

        <table class="table table-striped">
            <tr>
                <td>
                    <select name="selSearchType" id="selSearchType" class="form-control" ng-model="case.searchTerm"
                            ng-init="case.searchTerm == 'caseNo'" ng-options="o as o for o in case.searchTerms"></select>
                </td>
                <td><input type="text" class="form-control" placeholder="enter search term" ng-model="case.input" /></td>
                <td><button class="btn btn-default" type="button" ng-click="case.quickSearch()">Quick Search</button></td>
            </tr>
        </table>   
    </div>
</div>

在搜索时，所有结果都应该填入另一个模态弹出窗口的UI网格中。

在控制器中我等待先在服务中设置/存储结果，然后调用getQuickCasePopup功能区，打开一个模态对话框以显示结果。

  CaseServices.getCaseAdvSearchResults(postParams).then(function (result) {
        if (result.length > 0) {
            $scope.case.togglePleaseWait = false;
            console.log(result);
            console.log("Setting the result in CaseDataServices");
            CaseDataServices.setSearchResultsData(result);
            getQuickCasePopup($scope, $uibModal,$rootScope);

        }

我得到的结果到现在为止。并且模式弹出窗口也会打开，显示UI网格以显示结果。

function getQuickCasePopup($scope, $uibModal, $rootScope) {
    var templateUrl = BasePath + 'App/Transaction/Views/common/QuickCaseSearch.tpl.html';
    var controller = 'QuickCaseSearchCtrl';
    OpenModal($scope, $uibModal, null, templateUrl, controller, null, null, '', $rootScope);
}

function OpenModal($scope, $uibModal, $stateParams, templ, ctrl, grid, row, size, $rootScope) {

    var CssClass = '';
    if (size === 'lg') {
        CssClass = 'app-modal-window';
    }

    var ModalInstance = ModalInstance || $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: templ,
        controller: ctrl,  // Logic in instantiated controller 
        windowClass: CssClass

    });
}

在这个模态的控制器中，我得到了我在服务中存储的搜索结果，并设置了网格选项并显示了结果。

TransactionModule.controller("QuickCaseSearchCtrl", ['$scope', '$uibModal', '$uibModalInstance', 'uiGridConstants', 'TransactionDataServices', 'CaseDataServices', '$rootScope', function ($scope, $uibModal, $uibModalInstance,uiGridConstants, TransactionDataServices, CaseDataServices, $rootScope) {
        var columnDefs = CaseDataServices.getSearchResultsColumnDef();
        console.log("Column Defs " + columnDefs);
        var uiScrollNever = uiGridConstants.scrollbars.NEVER;
        var uiScrollAlways = uiGridConstants.scrollbars.ALWAYS;
        //passing rootscope for toggling filters
        $scope.case = {
            gridOptions: CaseDataServices.getSearchGridOptions(uiGridConstants, columnDefs),
            results : []
        }

         $scope.case.gridOptions.onRegisterApi = function (grid) {
             $scope.case.gridApi = grid;
         }

         console.log("Getting the result from CaseDataServices");
         $scope.case.results = CaseDataServices.getSearchResultsData();
         console.log("The quick search results returned---" );
         console.log($scope.case.results);
         console.log("Setting results into the grid");
         $scope.case.gridOptions = getCaseGridLayout($scope.case.gridOptions, uiGridConstants, $scope.case.results);

         $scope.case.backToSearchForm = function () {
             $scope.case.toggleAdvSearch = true;
             $scope.case.toggleAdvSearchResults = false;
         }


         $scope.case.pageChanged = function (page) {
             $scope.case.gridApi.pagination.seek(page);
         };

         $scope.case.back = function () {
             $uibModalInstance.dismiss('cancel');
         };
}]);

以下是要显示的模式弹出式代码....

<div class="modal-header">
    <h3 class="modal-title">Quick Case Search Results</h3>
</div>
<br />
<br />

<div class="row">
    <div style="margin-left:40px;margin-right:40px;">
        <div ui-grid="case.gridOptions" ui-grid-selection class="CaseAssociation" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!case.gridOptions.data.length">No data available</div>
        </div>

        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="case.totalItems" items-per-page="4" ng-change="case.pageChanged(currentPage)" ng-show="(case.totalItems>4) == true"
                            ng-model="case.currentPage" class="pagination" direction-links="false" id=""
                            first-text="&laquo;" last-text="&raquo;"></uib-pagination>
        </div>
    </div>
</div>
<br />

<div class="modal-footer">
    <button class="btn btn-default pull-left" ng-click="case.back()"> Back</button>
</div>

以下是我在浏览器控制台上获得的内容。结果返回但没有反映......

UI Grid未在Angular JS中填充

0 个答案: