How to get Webshim's updatePolyfill called for elements added by an Angular "ng-if"

Question

I have an Angular app with Webshim added principally to add date pickers in older browsers. I'm using this:

$scope.$on('$viewContentLoaded', function(target) {
    setTimeout(function() {
        $('#partials').updatePolyfill();
    }, 0);
});

to get the DOM updated when the view is changed.

But I have several pages that internally contain sections where ng-if is used to show some fields if some other fields are in a particular state, and as those sections are not in the DOM when the "$viewContentLoaded" happens the polyfills are not added. That ng-if logic is driven by model changes, so what would be ideal is if there was some way to generate an "afterAllModelChanges" event so the above technique could be used irrespective of the specific ng-if logic present.

Is there? Or is there a better approach to solving this problem?

Answer 1

After a few hours of Googling and experimenting this is what I've ended up with. I have this in my index page:

$.webshims.polyfill('es5 forms forms-ext');

and have added this directive to my project:

eepDirectives.directive('input', function() {
    return {
        restrict: 'E',
        priority: -1,
        link: function(scope, element, attrs) {
            if (attrs.type == 'date') {
                // Doesn't appear to need a setTimeout when used like this
                $(element).updatePolyfill();
            }
        }
    };
});

I'm only interested in <input type="date" .../> fields so this directive is limited to input elements and then further filters for that one type.

This gets the polfill updated however the input field is added to the DOM, and so works for an ng-if that has become true as well as when views are loaded.