CODEWITHSUNDEEP
angularjscoffeescriptrequirejszurb-foundationabide
kodeslacker
kodeslacker

Reputation: 127

Zurb Foundation Abide and AngularJS initialization

I am using both AngularJS and Zurb Foundation.To initialize Foundation you have to make the following call:

$(document).foundation()

But, when you load a new view using angularjs foundation js is not working anymore and you need to re-initialize Foundation again, i have done it like this:

app.run ($rootScope)=>
  $rootScope.$on '$viewContentLoaded', ()=>
    $(document).foundation()

When loading the first view, Abide works, but when loading another view using $routeprovider it doesn't work anymore. Expected Result:

enter image description here

The result after loading the view:

enter image description here

Any help would be greatly appreciated, thanks!

Upvotes: 1

Views: 1702

Answers (2)

kodeslacker
kodeslacker

Reputation: 127

The best choice would be wrapping Foundation plugins in angular directives or using only CSS/SASS provided by the framework. The workaround that i found is to include the plugin script in the AngularJS view.Either way AngularJs and Zurb Foundation do not play well together.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

The most common practice is to create an angular directive and within the link callback call your third party DOM manipulation code

Upvotes: 0

Related Questions