191、angular1之弹窗封装

<div id="">
  <div class="alertMask" ng-if="alert.isShowAlert" ng-click="clickMask()"></div>
  <div class="alertWhole" ng-if="alert.isShowAlert" ng-style="alert.width" id="alertDrag">
    <div class="alertTitle">
      <span ng-bind="alert.titleText" id="titleId"></span>
      <em ng-click="closeMask()" ng-show="alert.isShowTitle"></em>
    </div>
    <div class="alertContent">
      <div ng-bind="alert.contentText"></div>
      <div ng-bind-html="alert.templateHTML"></div>
      <div id="contentScope"></div>

    </div>
    <div class="alertBottom" ng-show="alert.isShowBottom">
      <input value="{{alert.cancelTxt}}" ng-click="closeMask()" ng-show="alert.isShowCancelButton" type="button" />
      <input value="{{alert.confirmTxt}}" ng-click="alert.confirmCallback()" ng-show="alert.isShowConfirmButton" type="button" id="idConfirm" />
    </div>
  </div>
</div>

(function () {
  angular.module(‘CY‘).directive(‘componentAlert‘, function () {
    return {
      restrict: ‘E‘,
      templateUrl: ‘module/alert.html‘,
      scope: {},
      controller: function ($scope, serviceAlert) {
        $scope.alert = serviceAlert;
        $scope.clickMask = function () {
          if ($scope.alert.isHideAlertAsClickMask) {
            $scope.closeMask()
          }
        };
        $scope.closeMask = function () {
          $(‘#alertDrag‘).css({
            ‘top‘: ‘50%‘,
            ‘left‘: ‘50%‘,
            ‘transform‘: ‘translate(-50%, -50%)‘
          });
          $scope.alert.show(false);
        };
        $scope.drag = function () {
          var oDiv = document.getElementById(‘alertDrag‘);
          oDiv.onmousedown = down;
          function processThis(fn, currentThis) {
            return function (event) {
              fn.call(currentThis, event);
            };
          }
          function down(event) {
            event = event || window.event;
            if (event.target.id != ‘titleId‘) return;
            this.initOffsetLeft = this.offsetLeft;
            this.initOffsetTop = this.offsetTop;
            this.initClientX = event.clientX;
            this.initClientY = event.clientY;
            this.maxOffsetWidth = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth;
            this.maxOffsetHeight = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
            if (this.setCapture) {
              this.setCapture();
              this.onmousemove = processThis(move, this);
              this.onmouseup = processThis(up, this);
            } else {
              document.onmousemove = processThis(move, this);
              document.onmouseup = processThis(up, this);
            }
          }
          function move(event) {
            var currentLeft = this.initOffsetLeft + (event.clientX - this.initClientX);
            var currentTop = this.initOffsetTop + (event.clientY - this.initClientY);
            //以下都是边界值的判断；
            if (currentLeft > this.maxOffsetWidth + this.clientWidth * 1.25) {
              currentLeft = this.maxOffsetWidth + this.clientWidth * 1.25;
            } else if (currentLeft < -this.clientWidth / 4) {
              currentLeft = -this.clientWidth / 4;
            }
            if (currentTop > this.maxOffsetHeight + this.clientHeight * 1.25) {
              currentTop = this.maxOffsetHeight + this.clientHeight * 1.25;
            } else if (currentTop < -this.clientHeight / 4) {
              currentTop = -this.clientHeight / 4;
            }
            this.style.left = currentLeft + ‘px‘;
            this.style.top = currentTop + ‘px‘;
          }

          function up() {
            if (this.releaseCapture) {
              this.releaseCapture();
              this.onmousemove = null;
              this.onmouseup = null;
            } else {
              document.onmousemove = null;
              document.onmouseup = null;
            }
          }
        };
        $scope.drag();
      },
      link: function () {

      }
    };
  }).factory(‘serviceAlert‘, function ($sce, $compile, $rootScope, $document, $timeout) {
    return {
      isHideAlertAsClickMask: true,
      width: ‘300px‘,
      isShowTitle: true,
      titleText: ‘系统消息‘,
      isShowBottom: true,
      cancelTxt: ‘取消‘,
      confirmTxt: ‘确定‘,
      isShowCancelButton: true,
      isShowConfirmButton: true,
      getFocus: function () {
        var that = this;
        that.focusedElement = document.activeElement;
        $(that.focusedElement).blur();
        angular.element(document).ready(function () {
          $timeout(function () {
            $(‘#idConfirm‘).focus();
          });
        });
      },
      set: function (obj) {
        var that = this;
        that.isShowAlert = true;
        that.contentText = ‘‘;
        that.contentHTML = obj.contentHTML;
        that.contentScope = obj.contentScope;
        that.contentCallback = obj.contentCallback;
        if (that.contentHTML) {
          if (that.contentScope) {
            that.newScope = $rootScope.$new();
            angular.merge(that.newScope, that.contentScope);
            angular.element(document).ready(function () {
              angular.element(‘#contentScope‘).empty().append($compile(angular.element(that.contentHTML))(that.newScope));
            });
          } else {
            that.templateHTML = $sce.trustAsHtml(that.contentHTML);
            angular.element(document).ready(function () {
              angular.isFunction(that.contentCallback) ? that.contentCallback() : angular.noop();
            });
          }
        }
        that.confirmCallback = function () {
          angular.isFunction(obj.confirmCallback) ? obj.confirmCallback() : angular.noop();
          that.show(false);
        };

        that.cancelCallback = function () {
          angular.isFunction(obj.cancelCallback) ? obj.cancelCallback() : angular.noop();
          that.show(false);
        };
        angular.merge(that, obj);
        that.getFocus();
      },
      show: function (boolean) {
        var that = this;
        this.isShow = boolean || false;
        if (boolean === false) {
          $(that.focusedElement).focus();
        }
      },
    };
  });

})();