Close angular modal

Question

我是新的angularJs和我有一個應用程序，使用角模態和jqGrid。 （我知道這不好，但由於某種原因，我現在必須與兩個人一起工作）。

我的模態內容使用templateUrl加載。

<div ng-controller="SearchPerson as ctrl"> 
    <div class="modal-body"> 
     <table id="list"></table> 
     <div id="pager"></div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-link" data-dismiss="modal" ng-click="$close()">CLOSE</button> 
     <button type="button" class="btn btn-primary" ng-click="ctrl.CLOSE()">Save changes</button> 
    </div> 
</div> 

和創建我有這樣的代碼：

$(function() { 
    $("#list").jqGrid({ 
     url: "/Home/List", 
     datatype: "json", 
     mtype: 'GET', 
     colNames: [" ", "FirstName", "LastName"], 
     colModel: [ 
      { 
       width: 30, 
       sortable: false, 
       formatter: function (cellvalue, options, rowObject) { 
        return '<a href="javascript:ctrl.Select();">SELECT</a>'; 
       }, 
      }, 
      { 
       name: "FirstName", 
       width: 60, 
      }, 
      { 
       name: "LastName", 
       width: 90 
      } 
     ], 
     jsonReader: { 
      page: "Page", 
      total: "Total", 
      records: "Records", 
      root: "Rows", 
      repeatitems: false, 
      cell: "cell", 
      id: "id", 
      userdata: "userdata", 
     }, 
     pager: "#pager", 
    }); 
}); 

和開放模式我寫這篇文章的代碼：

angular.module('AngularModal', ['ui.bootstrap']); 
    angular.module('AngularModal').controller('ModalDemoCtrl', function ($scope, $modal) { 

     $scope.open = function (size) { 

      var modalInstance = $modal.open({ 
       templateUrl: '/Home/SearchGrid', 
       controller: 'ModalInstanceCtrl', 
       size: size, 
       backdrop: 'static', 
      }); 

      modalInstance.result.then(function() { 
       // 
      }, function() { 
       // 
      }); 
     }; 

    }); 
    angular.module('AngularModal').controller('ModalInstanceCtrl', function ($scope, $modalInstance) { 
     $scope.ok = function() { 
      $modalInstance.close(); 
     }; 

     $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); 
     }; 

    }); 

    angular.module('AngularModal').controller('SearchPerson', function ($http, $modalStack) { 

    }); 

我要的是：當我點擊Select鏈接我網格，警報FirstName，然後關閉模式。

如何做到這一點？

值得注意的是，當我點擊關閉按鈕，模式關閉。而且當我點擊「保存更改」按鈕時，模式將關閉。 但是，當我點擊SELECT鏈接，模式不會關閉。當我編寫雙擊SELECT和「Save Change」時，

Answer 1

你的代碼絕對不行。對於ng-click，表達式的上下文是當前的$scope，而對於href="javascript:expression"，上下文是全局的，或者說window。

對於您的情況，我肯定會建議您嘗試一些與AngularJS更兼容的其他網格庫（如http://angular-ui.github.io/ng-grid/或http://ui-grid.info/）。這可以節省大量的時間。否則，如果你真的堅持使用jqGrid，你可能需要自己手動將它包裝成指令。在您的應用程序中，您可能需要考慮如何「爲」格式化程序功能生成的html代碼片段「角色化」。

formatter: function (cellvalue, options, rowObject) { 
    var html = '<a ng-click="ctrl.Select()">SELECT</a>'; 
    var linkFunc = $compile(html); 
    linkFunc(scope);   // the scope in which you have the `ctrl.Select()` function. 
    return html; 
}, 

$編譯：https://docs.angularjs.org/api/ng/service/ $編譯

然後你就可以調用的角度範圍的功能。

但是，在我看來，這不是一個好的做法。如有可能，請找一個替代圖書館。