angularjs 自定义指令弹窗

(function() {
  'use strict';

  angular.module('frontierApp')
    .directive('confirmPopup', ['$timeout', ConfirmPopupDirective])
    .directive('messageTips', ['$timeout', '$rootScope', MessageTipsDirective]);

  function ConfirmPopupDirective($timeout) {
    var directive = {
      restrict: 'A',
      scope: {
        confirmPopup: '&',
        confirmTitle: '=',
        confirmContent: '=',
      },
      link: link,
      transclude: true,
      template: '<div class="trans-clude" ng-transclude ng-click="show()"></div>' +
        '<div class="modal fade confirm-modal">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<span class="close ES3iconfont ES3icon-icon-closs" ng-click="close()"></span>' +
        '<h4 class="modal-title" ng-bind="confirmTitle"></h4>' +
        '</div>' +
        '<div class="modal-body"><i class="iconfont icon-warning"></i>' +
        '<p ng-bind="confirmContent"></p>' +
        '</div>' +
        '<div class="modal-footer">' +
        '<button class="button-cancel" ng-click="close()">取消</button>' +
        '<button class="button-confirm" ng-click="confirm()">确定</button>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>'
    };

    return directive;

    function link(scope, element, attrs) {

      scope.show = function() {
        element.find('.modal').modal();
      };

      scope.close = function() {
        element.find('.modal').modal('hide');
      };

      scope.confirm = function() {
        element.find('.modal').modal('hide');
        $timeout(function() {
          scope.confirmPopup();
        }, 500);
      };
    }
  }

  function MessageTipsDirective($timeout, $rootScope) {

    var directive = {
      restrict: 'EA',
      link: link,
      replace: true,
      template: '<div class="message-tips"></div>'
    };

    return directive;

    function link(scope, element, attrs) {

      //level: success,error
      $rootScope.showMessage = function(title,message, level, delay) {
        var tip = angular.element('<div class="alert message-tip" >\
          <div class="message-tip-header">'+title+'\
          <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span></button>\
          </div><div class="message-tip-body"><i class="iconfont icon-'+level+' iconSuccess"></i>' + message + '</div></div>').appendTo(element);
        tip.addClass('alert-' + level);

        if (delay) {
          $timeout(function() {
            tip.alert('close');
          }, delay * 1000);
        }

        element[0].addEventListener('click',function(e){
          if(e.target.nodeName === 'BUTTON'){
            if(message == '请选择要恢复的数据源'){
              // location = 
            }
          }
        })

      };
    }
  }

  angular.element('body').append('<div message-tips></div>');
})();

　　

转载于:https://www.cnblogs.com/WaTa/p/8056613.html