angularJs - 弹窗

突然要维护前辈们的项目，angularJs 写的以前没有用过，在此记录一下

1，首先是 html 弹窗页面

<div class="ngdialog-title">{{ngDialogData.title}}</div>
<div class="ngdialog-message" bindonce>
  <div class="select-group-user-container">
    <div class="left">
        <div class="left-list" ng-class="{'active': imageClassify == 'personal'}" ng-click="selectImageClassify('personal')">个人库</div>
        <div class="left-list" ng-class="{'active': imageClassify == 'system'}" ng-click="selectImageClassify('system')">系统库</div>
    </div>
    <div class="right">
      <div class="img-concent" ng-show="selectImageList.length > 0">
        <div class="concent-div" ng-repeat="(key, imgfile) in selectImageList track by key" ng-if="['jpg', 'png', 'jpeg', 'gif', 'bmp'].indexOf(imgfile.obj_type) > -1">
          <img src="{{imgfile.url}}"
          class="img-style"
          alt="加载中...">
          <div class="img-select" ng-click="selectImg(imgfile)">
            <img ng-if="pageImageSrc == imgfile.url" src="/static/img/bdp-ok.png" class="img-select-svg"/>
          </div>
          <div class="img-name" title="{{imgfile.obj_name}}">{{imgfile.obj_name}}</div>
        </div>
      </div>
      <div class="nodata" ng-show="!isSelectImageList && selectImageList.length === 0">
        暂无数据
      </div>
      <div class="nodata" ng-show="!isSelectImageList && getImageListParam.page === selectImageListPagesCount && selectImageList.length > 30">
        没有更多了
      </div>
    </div>
  </div>
</div>
<div class="ngdialog-buttons" bindonce>
    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="selectImageOk()" bo-text="'ok' | translate" ></button>
    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog()" bo-text="'cancel' | translate" ></button>
</div>

2，点击按钮 执行打开弹窗函数

// 前序 代码 directive() 中需要引入 ngDialog

               // 图片素材列表
                $scope.selectImageList = [];
                // 素材资源请求参数
                $scope.getImageListParam = {
                    postfix : "jpg,png,jpeg,gif,bmp",
                    page: 1, // 第一页
                    page_size: 31
                    // is_system: 1
                  }
                // 图片列表 总页数
                $scope.selectImageListPagesCount = 0;
// -----------------------------------------------------------
                $scope.selectImage = function() {
                  $scope.isSelectImageList = false;
                  $scope.imageClassify = 'personal';
                  // 默认加载第一页
                  $scope.getImageListParam.page = 1
                  // 默认加载个人库
                  delete $scope.getImageListParam.is_system;
                  $scope.isSelectImageList = true;
                  // 调用业务接口
                  commonService.dsh_design.getMaterialList($scope.getImageListParam).then(res => {
                    $scope.isSelectImageList = false;
                    if (res.data.status == "0") {
                      $scope.selectImageList = res.data.result.data_list;
                      $scope.selectImageListPagesCount = res.data.result.pages_count;
                      //--- 打开选择框代码 start
                      $scope.selectImageDialog = ngDialog.open({
                        template: '/static/dashboard/adv-page/select-image.html',
                        className: 'ngdialog-theme-default ngDialog-width-950 ngDialog-select-image-dialog',
                        scope: $scope,
                        data: {
                            title: '选择图片'
                          }
                        });
                      } else {
                        errHint(res.data.errstr);
                      }
                    }).finally(() => {
                      $scope.isSelectImageList = false;
                    })
                    // ------- 打开选择框代码 end 
                };

3，窗口样式 css

.ngDialog-select-image-dialog {
  .apply-all-user {
    text-align: right;
    line-height: 32px;
  }

  .select-group-user-container {
    position: relative;
    height: 600px;
    overflow: hidden;

    .left {
      float: left;
      width: 100px;
      height: 100%;
      overflow: auto;
      padding: 8px 0;
      font-size: 14px;
      .left-list {
        height: 32px;
        line-height: 32px;
        padding-left: 16px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .list-title {
          display: block;
          max-width: 108px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list-name-flex {
          display: flex;
          align-items: center;
        }
      }
      .padding-left-24 {
        padding-left: 24px;
        justify-content: space-between;
      }
      .active {
        // background-color:  @theme($bgDialogHoverList);
        background-color:  @theme($bgNgdialogBtnOkHover);
        color: @theme($fontTextHover);
      }
    }

    .right {
      position: relative;
      margin-left: 100px;
      height: 100%;
      padding: 8px 12px;
      z-index: 2;
      overflow-y: auto;
      .img-concent {
        display: flex;
        // max-height: 0px;
        overflow: hidden;
        flex-flow: row wrap;
        .img-style {
          margin: 8px 12px;
          border-radius: 8px;
          background: #303643;
          width: 100px;
          height: 80px;
        }
        .concent-div {
          position: relative;
          .img-name {
            max-width: 120px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            top: -10px;
            margin-left: 4px;
            position: relative;
            cursor: default;
          }
          .img-select {
            position: absolute;
            display: flex;
            width: 100px;
            height: 80px;
            top: 5px;
            left: 5px;
            padding: 3px;
            cursor: pointer;
            // align-items: flex-end;
            .img-select-svg {
              position: absolute;
              left: 80px;
              top: 10px;
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .nodata {
        line-height: 32px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}

// 主题样式相关变量
.ngDialog-select-image-dialog {
  .select-group-user-container {
    background: @theme($bgAddGroupMemberContainer);
    box-shadow: @theme($shadowAddGroupMemberContainer);

    .left {
      .left-list:hover {
        background-color:  @theme($bgNgdialogBtnOkHover);
        color: @theme($fontTextHover);
      }
    }

    .right {
      background: @theme($bgAccountWrap);
      box-shadow: @theme($shadowAccountListRightContent);
    }
  }
}