Safely reloading webflow.js

Design help Custom code
1

I am working on a site that is designed using Webflow and uses Angular to communicate with the back-end. As the user navigates the site, the DOM is rewritten by angular to show the appropriate section of the site.

Unfortunately, this rewriting of the DOM means that Webflow hasn’t wired the correct actions to the new elements when they are introduced. Is there an existing way to either safely tear down the listeners created by webflow.js and reload it for the whole page, or get it to just search a given element in the DOM for objects it should wire up?

2

Was there an answer to this? Did you ever solve this issue?

3

Ultimately, I solved this with a custom directive that hooks into the data-ix attribute that comes out of webflow:

angular.module('appController').directive('ix', function($timeout, $rootScope, $window) {
    return function(scope, element, attrs) {
        if ($rootScope.webflowInits[attrs.ix]) {
            $timeout(function() {
                $window.Webflow.require('ix').init([$rootScope.webflowInits[attrs.ix]]);
            });
        }
    };
});

I have the javascript inits from the end of an exported webflow.js stored in the $rootScope.webflowInits array, and they are loaded every time an element appears with the data-ix attribute.

I believe the timeout was required to ensure that this takes place in the next digest cycle, as I had issues if that was not the case.

2 Likes