How do I call a function specified in a controller when a DOM object has been rendered in Angular?

Question

I have a modal that I would like shown when a URL parameter is specified (for example, url.com/?showmodal=1. How can I call launchModalIfParameter after the div has been rendered? Some extracts are included below.

Core.js

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}

Widget.html (using Bootstrap's modal dialog)

<div class="modal fade" id="createSupportTicket" role="dialog" aria-hidden="true">
</div>

Widget.js

$scope.launchModalIfParameter = function () {
     if ($('#createSupportTicket').length) {
         alert('Found with Length');
     }
     if (getUrlParameter('ticket') == 1) {
         $('#createSupportTicket').modal('show');
         console.log("Shown activated");
     }
}

Joel · Accepted Answer · 2015-04-01T21:40:31.050

This is pretty easy todo with a custom directive.

Essentially you create a custom directive, and within the link function (which is run after your modal is compiled, databound, etc), you can display the modal based on some criteria.

It's as simple as this:

link: function(scope, element, attrs) {
                if (getUrlParameter('ticket') == 1) {
                     $(element).modal('show');
                 }
            }

Fiddle illustrating this here: http://jsfiddle.net/gtxdLcb8/

An additional added benefit of this is that you can add a $watch a variable on your scope (in the link function) and automatically show or hide the modal whenever that variable changes.

How do I call a function specified in a controller when a DOM object has been rendered in Angular?

1 Answers1