angularjs中$uibModal使用说明

[songhuiqing88]

• 引用 ui.bootstrap模块
• 在controller定义是注入 $uibModal
• $uibModal使用，其中templateUrl 为模版url，可以在全局定义，也可以定义在自定义界面中，格式如下：

  <script type="text/ng-template" id="approvalModalContent.html" >
      <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">提醒</h4>
     </div>
     <div class="modal-body">
          <span class="text-info">该活动是否需要记录学时，点击“是”记录，“否”不记录</span>
     </div>
     <div class="modal-footer">
          <button class="btn btn-primary" type="button" ng-click="$ctrl.clickYes()">是</button>
          <button class="btn btn-default" type="button" ng-click="$ctrl.clickNo()">否</button>
      </div>
  </script>

• 基本实现代码示例

  $uibModal.open({
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          controllerAs: '$ctrl',
          templateUrl : 'approvalModalContent.html',  
          controller : function($uibModalInstance){
              console.log("in controller");
              var $ctrl = this;
                $ctrl.clickYes = function () {
                  $uibModalInstance.close();
                };
                $ctrl.clickNo = function () {
                  $uibModalInstance.dismiss('cancel');
                };
          } 
      }).result.then(function(result){//确定
          classCheckBean.isRecordScore = 1;
          checkclassservice.checkClassState(classCheckBean).success(function(data){
              $scope.refreshsystem();
          });
      },function(reason){//取消
          classCheckBean.isRecordScore = 2;
          checkclassservice.checkClassState(classCheckBean).success(function(data){
              $scope.refreshsystem();
          });
      });