码迷,mamicode.com
首页 > 其他好文 > 详细

angular全局确认框confirm

时间:2017-09-07 10:57:43      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:message   text   mode   cto   ted   tor   fun   outline   request   

angular.module(‘custom-template‘, []).run(["$templateCache", function ($templateCache) {
  $templateCache.put("template/modal/confirmModelTemplate.html",
  ‘<div id="youModel" class="m-c">\n‘ +
  ‘ <div class="modal-header">\n‘ +
  ‘ <h4 class="modal-title">{{modalTitle}}</h4>\n‘ +
  ‘ </div>\n‘ +
  ‘ <div class="modal-body">{{modalContent}}</div>\n‘ +
  ‘ <div class="modal-footer" style="text-align: center;">\n‘ +
  ‘ <button type="button" class="btn btn-primary" ng-click="ok()">确定</button>\n‘ +
  ‘ <button type="button" class="btn btn-default" ng-click="cancel()">取消</button>\n‘ +
  ‘ </div>\n‘ +
  ‘</div>\n‘ +
  "");
}]);

然后再模块中注入‘‘custom-template’;

打开该模块的方法:

app.factory(‘Common‘, [‘$http‘, ‘$q‘, ‘$cookieStore‘, ‘$location‘, ‘$modal‘,
  function ($http, $q, $cookieStore, $location, $modal) {
    return {
      openConfirmWindow: function (modalTitle, modalContent, modalInstance) {
      var deferred = $q.defer();
      var confirmModal = $modal.open({
      backdrop: ‘static‘,
      templateUrl: ‘template/modal/confirmModelTemplate.html‘, // 指向确认框模板
      controller: ‘ConfirmCtrl‘,// 初始化模态控制器
      windowClass: "confirmModal",// 自定义modal上级div的class
      size: ‘sm‘, //大小配置
      resolve: {
        data: function () {
        return { modalTitle: modalTitle, modalContent: modalContent };//surgeonSug: $scope.surgeonSug,
      }
    }
  });
  // 处理modal关闭后返回的数据
  confirmModal.result.then(function () {
    if (!!modalInstance) {
      modalInstance.dismiss(‘cancel‘);
    }
    deferred.resolve();
      }, function () {
    });
    return deferred.promise;
    }
  }
}]);

关闭该模态框同时带参过来:

app.controller(‘ConfirmCtrl‘, [‘$scope‘, ‘$modalInstance‘, ‘data‘,
  function ($scope, $modalInstance, data) {
  $scope.modalTitle = data.modalTitle;
  $scope.modalContent = data.modalContent;
  $scope.ok = function () {
  $modalInstance.close(true);
  };
  //关闭邮件框
  $scope.cancel = function () {
    $modalInstance.dismiss(‘cancel‘);
  };
}]);

在其他控制器调用该确认框:(首先注入Common)

Common.openConfirmWindow(‘删除提示!‘, ‘确定删除吗?‘).then(function () {
  $http({
    method: ‘POST‘,
    url: ‘/contact/delete?id=‘ + deleteData.id,
    headers: { ‘Content-Type‘: undefined },
    transformRequest: angular.identity
  }).then(function (response) {
    $scope.toaster.text = response.data.message;
    if (response.data.success == false) {
      toaster.pop(‘error‘, ‘Error‘, $scope.toaster.text);
      return;
    }
    toaster.pop(‘success‘, ‘Success‘, $scope.toaster.text);
    $scope.ContactData();
  }, function (response) {
    $scope.toaster.text = ‘Network error. Please try again later!‘;
    toaster.pop(‘error‘, ‘Error‘, $scope.toaster.text);
  });
});

完成确认框之后会发现确认框在顶部,然后修改全局的css的‘.model‘样式,所有模态框都垂直居中了,如下:

.modal {
  position: fixed;
  top: 0;
  /* right: 0;
  bottom: 0;
  left: 0; */
  z-index: 1040;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

效果图:

技术分享

 

angular全局确认框confirm

标签:message   text   mode   cto   ted   tor   fun   outline   request   

原文地址:http://www.cnblogs.com/bertha-zm/p/7488451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!