AngularJS弹出框 $modal的使用

//HTML:注意在Chrome浏览器中会给input添加默认样式,影响到打钩的框出不来,主要是position和影响透明度的opacity

//JS:showEdit是点击button的事件,写在method中;

showEdit:function (trueOrfalse) {
            var modalInstance = $modal.open({
                windowClass: '',
                templateUrl: 'noticeListModal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                }
            });
            modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
                console.log('modal is opened');
            });
            modalInstance.result.then(function (ret) {//模态窗口关闭之后回传参数
$modalInstance.close($scope.selected);
                 console.log(ret); 
             }, function (reason) { 
                 console.log(reason); 
          }); 
       }


//模态窗口的controller
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, toaster) {
    $scope.notice = '';
    $scope.noticeTitle = '';
    $scope.isHouseOwnerChecked = 0;
    $scope.isHirerChecked = 0;

    $scope.ok = function() {
        $scope.isHouseOwnerChecked = $scope.isHouseOwnerChecked?1:0;
        $scope.isHirerChecked = $scope.isHirerChecked?1:0;
        if(!$scope.notice || !$scope.noticeTitle) {
            toaster.pop("error", "请添加通知内容");
            return
        }
        if(!$scope.isHouseOwnerChecked && !$scope.isHirerChecked) {
            toaster.pop("error", "请选择发送角色");
            return
        }

        $.ajax({
                url: "/rest/sysNotice/test",
                data:{
                    isNoticeHouseOwner:$scope.isHouseOwnerChecked,
                    isNoticeHirer:$scope.isHirerChecked,
                    memo:$scope.notice,
                    title:$scope.noticeTitle
                },
                success: function (resp) {
                    if(resp.success) {
                        toaster.pop("success", "发送成功", resp.message);
                    }else{
                        toaster.pop("error", "发送通知", resp.message);
                    }
                }
            });
        $modalInstance.close();

    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

详细的$modal属性和方法可以参考这里:

https://blog.csdn.net/CSDN_lihe/article/details/49633481

你可能感兴趣的:(AngularJS)