Streaming live at 10am (PST)

Webflow Dropdown Issues with AngularJS

Does anyone know why the Webflow Navigation / Drop Down Menus

— do not work with AngularJS views ?

Adding a Bootstrap drop down (manually) works perfectly with AngularJS.

Viewing the console logs… the Webflow Drop Down never gets triggered when the user clicks on the dropdown.

Adding a link into the form - that calls JQuery function - that dynamically adds / removes the “w–open” class in the Webflow Drop Down… opens / closes the drop list as expected.

So technically… I can get around this issue with making a JQuery call whenever I need to interact with a Webflow Drop Down Menu…

But why is the Webflow Drop Down Menu Click Event ignored in the first place ???

I haven’t the time to dig into the webflow.js file… and I really don’t want to.

This issue is making it difficult for me to keep my current application in Webflow.

@callmevlad @thesergie @cyberdave

Event used might not be ‘click’, but ‘tap’ - I’ve seen it used in several places - check the webflow.js file.

Thanks - I’m been looking into tap.

In reviewing the webflow.js file

  • It appears the issue is not really “Webflow” or “AngularJS”.

The problem is created by the different methodologies used by AngularJS as compared to Webflow.

Webflow follows the more “traditional” method. AngularJS does not… but that’s also why AngularJS is so powerful.

When I say “powerful”… both Webflow and AngularJS are “powerful” tools. Webflows power is evident through the way it allows someone to quickly and easily create website… whereas AngularsJS’s power is in allowing the Developer to change information via the DOM.

To display information - AngularJS manipulates the DOM after the page init. Webflow sets up the page init.

In a way… Webflow and AngularJS are for different people. I happen to be “both people”… and that’s why I am frustrated as I am trying to find a way to connect the two different technologies.

A Designer would likely never see / encounter this issue. A Developer… (at least the Developers I know)… probably not use Webflow - and simply create the site by hand.

Webflow - like many scripting languages - preloads or initializes the elements on a page.

Since AngularJS doesn’t “load” a “View”… until after the initialization of the page… the elements in the AngularJS view “technically don’t exist”. You “see” the elements via the html code… but there’s nothing binding them to any event.

This is evident if you trace through the webflow.js file. The build function is called on init.

This is “not good” if you need to load an element or object that needs to initialized by Webflow itself.

It seems (so far in code)… the Webflow Dropdown is the only affected element

  data.list = $el.children('.w-dropdown-list');
  data.toggle = $el.children('.w-dropdown-toggle');
  data.links = data.list.children('.w-dropdown-link');

Using JQuery… there must be a way to initialize a particular element… after the init.

Why must things be so difficult.

ah… I see the issue.

This topic was automatically closed after 60 days. New replies are no longer allowed.