Question

嗨，有人可以告诉我该怎么做如果我想要开模态：

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

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

他不想打开自己，因为在网址中是：

http://www/#!#openModal

如果我从控制器中删除$ location，我会再次点击该网址，如下所示：

http://www/#openModal然后modal将打开，但我需要使用这个$ 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/＆＃39;

如果你不使用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);
}

莫代尔不想通过$ location AngularJS打开自己

1 个答案: