Bootstrap Modal einen Link auf UI-Grid

Question

In meinem UI Grid hier klicken werden die Spalten Defs in meiner myController.js Datei:

{ 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 } 

Hier den case_key Link ein UI-Bootstrap modal sollte Pop-up auf klicken.

Wie geht das?

ich in einer HTML-Datei einfach mit Hilfe einer Schaltfläche klicken, um es so etwas wie ist:

  <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> 

Aber hier das Click-Ereignis meiner controller.js-Datei wird dann, wie die modal geöffnet werden?

Answer 1

Sie müssen das Feld cellTemplate ändern und dann grid.appScope.openModal() anrufen. openModal sollte in Ihrem Hauptcontroller unter $scope.openModal leben. Machen Sie es wie folgt aus:

Ihre Vorlage:

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

die Vorlage in gridOptions verwenden.

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

Funktion modal aufzurufen:

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