javascript - modal 不想通过 $location AngularJS 打开自己

Question

嗨，有人可以告诉我如果我想打开模态该怎么办:

<a ng-click="openingModal($event)" href="#openModal">Open Modal</a>

<div ng-click="clickedOutsideModal()" id="openModal" class="modalDialog">

他不想打开自己，因为网址是:

http://www/#!#openModal

如果我从 Controller 中删除 $location，然后再次单击，URL 将如下所示:

http://www/#openModal然后模态将打开，但我需要使用这个 $location 我应该做什么来解决这个问题？

Answer 1

为了显示模态，我使用像这样的 jquery-ui 对话框，我使用 jQuery、jQuery-UI 和 AngularJS:

<div ng-click="clickedOutsideModal()" id="openModal" class="modalDialog">

//In Angular JS
$scope.clickedOutsideModal= function(data){
    showModalMessage('Title', 'Content');
}
//In jQuery
function showModalMessage(title, content){
    elModalMessage = $('<div>').attr('title', title).html(content);
    elModalMessage.dialog({
        modal: true,
        buttons: {
            'OK': function() {
            $( this ).dialog( "close" );
        }
    }
});
}

了解如何使用 jquery-ui:https://jqueryui.com/dialog/ '

如果你不使用 jQuery 可以用另一种方式:

<div ng-click="clickedOutsideModal()" id="openModal" class="modalDialog">

//In Angular JS
$scope.clickedOutsideModal= function(data){
    showModalMessage('Title', 'Content');
}

//In the Javascript
function showModalMessage(title, content){
   document.getElementById("modal_title").innerHTML = title;
   document.getElementById("modal_desc").innerHTML = content;
   document.getElementById("modal").style.visibility = "visible";
}
function modal_hidden(){
    document.getElementById("modal").style.visibility = "hidden";
}

//IN HTML and before the body ended
<div  id="modal">
    <div id="modal_wrapper">
        <span onclick="modal_hidden()">Close</span>
        <div id="modal_title"></div>
        <div id="modal_desc"></div>
    </div>
</div>

//IN CSS FILE
#modal{
  display: none;
  background: rgba(0,0,0,0.35);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#modal_wrapper{
  width: 100%;
  background: #fff;
  border: 1px solid #cdcfd1;
  padding: 30px 0;
  margin-top: 125px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}