ElenaDBA ElenaDBA - 3 months ago 9
AngularJS Question

Setting href property dynamically based on partial page

I have an index.html page that has a link on it that displays modal dialog when clicked.

<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>


Also index page displays partial pages inside a
ui-view
:

<div class="" ui-view>

</div>


The link that opens the modal is on the index page in the , so it is visible on any page. The problem I am having is when
Close
button is clicked, the modal dialog closes but then the user is taken to the login page.
This is happening because
href="#"
. In order for it to be taken the a page should be something like
#/page1
. So it has to be set dynamically as the user navigates through the site. I can't seem to figure out a way to do that. Can anyone help?

The page url is something like this:


http://localhost:77777/index.html#/page1


So I'd need to capture the page it is on and assign it to
href
property dynamically. How could I do that?

Answer

Why don't you use a button and ng-click?

something like:

<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>Modal sample text</p>
    </div>
    <div class="modal-footer">
        <button ng-click="closeModal()" class="modal-action modal-close waves-effect waves-green btn-flat">Close</button>
    </div>
</div>

And on the controller:

$scope.closeModal = function(){
    //your code to close the modal window
}

Hope it helps

Comments