CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
user3607612
user3607612

Reputation: 131

Add Content To DOM AFTER AngularJS Has Completed Asynchronous Loading

I have angular code that fetches 8 json files asynchronously each via $http.get. This is called using ng-init="someFunct()" in a template code that is attached. Everything works great including filtering when a user types into an input text box. Filtering is especially important to my application.

To make filtering even better, I extract keywords from the said json files which I then wrap with <span class="tag" ng-click="filterWith='kywd'">{{kywd}}</span> in the hope that a user can click on the tags instead of type. This ONLY works if I embed the tags statically - in the real application I cannot know the keywords in advance. If I insert dynamically via $("#someContainerID").append(TAG_HTML_CODE) or similar it NEVER works!

In a nutshell this is what I need to achieve:

1) Dynamically inject multiple (in hundreds) such tags into DOM;

2) Inject the tags ONLY after everything else has loaded and compiled - but especially after the json files have been read and keywords extracted;

3) The tags that I inject need to respond to something like ng-click="filterWith='some_keyword'"

If there was a way to tell when AngularJS has finished all other processing - how great this would be! I have read everywhere and it seems so cryptic and confusing - pls HELP!

I have even tried the following code to no avail:

$timeout(function () {
        $scope.$apply(function () {

            //code that works on the keywords - works perfect!

            var filterRegex = /\s*([\w\d.%]+)\s*/i;
            var dom_elem = angular.element(document.querySelector("#filter_tags"));
            dom_elem.html("");
            for (var m = 0; m < tags.length; m += 1) {
                var match = filterRegex.exec(tags[m][0]);
                if (match != null) {
                    dom_elem.append($compile("<span data-ng-model=\"filterWith\" data-ng-click=\"filterWith='" + match[1] + "'\" title=\"" + tags[m][1] + "\" class=\"sk3tag clk\">" + match[1] + "</span>")($scope));
                }
            }
        });
    }, 10000, false);
}

EDIT: Narrowed the scope of my challenge to mainly one!

The bigger challenge for me is how to enable ng-click in the dynamically injected code and how to do it right.

Upvotes: 1

Views: 713

Answers (2)

user3607612
user3607612

Reputation: 131

Earlier I had asked the question above. Somebody suggested I read further on directives instead. I did, fairly well. I came up with the following solution, to use click events on html code injected dynamically to DOM. I thank truly God for helping me figure it out, eventually. I no longer need to wait for the asynch data, whenever it comes and hence updates the model, my html tags are updated automatically - MVC magic! It seems to work great!

ANGULAR //excerpt

myNgApp.controller('ctlTodayLatest', ['$scope', '$timeout', '$compile', '$http', function () {
    $http.get('/filtertags.json').then(function (response) {
            $scope.filterTags = response;
        },
        function (response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log(response);
        }
    );
}]);

myNgApp.directive("myFilterTag", function () {
    return {
        template: "<span data-ng-repeat=\"tag in filterTags\" title=\"{{tag[0]}}\" class=\"mytag clk\" ng-click=\"filterWith(tag[0])\">{{tag[0]}}</span>",
        link: function (scope, element, attrs) {
            scope.filterWith = function (term) {
                scope.fQ = term;
            };
        }
    };
});

HTML //excerpt

<div id="filter_tags" class="xip2 TAj" my-filter-tag></div>

Upvotes: 1

Evgeniy Chekan
Evgeniy Chekan

Reputation: 2665

Use Promise.all() to trigger when everything is loaded.

Upvotes: 1

Related Questions