Home Timing issue between looking for elements and API response
Reply: 0

Timing issue between looking for elements and API response

cool breeze
cool breeze Published in 2018-02-13 19:18:15Z

I have a angularjs application, and when the application loads it makes an API call to fetch some data and render a list on the page.

For each item in the list I am creating a special css class "special-link" that will create a modal popup.

Here is a snippet of the basic structure:

 var myApp = angular.module("myApp", ["ngRoute", "ngSanitize"])
        .config(function($routeProvider) {

            $routeProvider.when("/", {
                controller: "homeController",
                controllerAs: "vm",
                templateUrl: window.applicationBaseUrl +  "Angular/myApp/Template/Index.html"

            $routeProvider.otherwise({ redirectTo: "/"});


    myApp.directive("userModal", ["$window", "$compile", function ($window, $compile) {
        return {
            restrict: "EA",

            link: function($scope, $el, attrs, $rootScope) {

                elements = $el.find("special-link");


So what is happening is that this works if I hardcode a link in my template page with the CSS class "special-link".

It doesn't work with any of the links that come from the API response, and it looks like it is a timing issue.

When I look for all the elements that have the CSS class, there are none because the in the controller it makes the API request and renders the response to the page.

How can I fix this timing issue such that my directive will load AFTER my api response has finished and I render the results to the DOM?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.292641 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO