modal dont want open himself by $location AngularJS

Question

Hi can someone tell me what to do If i want open modal :

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

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

And he don't want open himself because in url is :

http://www/#!#openModal

If i delete $location from controller and I will click again the url will look like:

http://www/#openModal and then modal will open, but I need use this $location what should I do to fix this problem??

Answer 1

for showing modal i use jquery-ui dialog like this, i use jQuery, jQuery-UI and 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" );
        }
    }
});
}

Learn about using jquery-ui: https://jqueryui.com/dialog/ '

If you do not use from jQuery can do with another way:

<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);
}