Initialize Zurb Foundation 5 with AngularJS directive

Question

I created three plunkrs to illustrate my problem. I am trying to create an AngularJS directive that initializes the base and applies the necessary javascript to the loaded template. At first I tried to use ngInclude to add the Foundation 5 navigation bar to all the pages of my website. The top bar works as expected when the html is directly applied to the partial. When html is added in a directive such as ngInclude, the top bar loses all its functionality. I suspect that this happened because the foundation is not initialized after adding the template with a directive. As a solution, I created a custom directive that would initialize the foundation and compile the html template. Initializing the foundation the way I do, freezes the application. Anyone have a solution?

Trying to achieve this without resorting to Angular UI.

Example 1: HTML is directly applied to a view. Works as expected, when you click on the drop-down menu, pages are displayed.

http://plnkr.co/edit/aQc6j2W9MpRuJo822gAF?p=preview

Example 2: ngInclude is used to load a template into dom. No functionality is achieved when you click on the drop-down menu, nothing happens.

http://plnkr.co/edit/fSS3FfYKFilMXsIkYUHg?p=preview

Example 3: A separate directive is created to replace ngInclude, which initializes the creation, compilation and loading of a template in the DOM. Cannot provide plunkr because it just freezes, but here is the code.

.directive('testdirective', function($compile) { return { restrict: 'AE', templateUrl: 'partials/includes/nav.html', link: function(scope, element, attrs) { $compile($(document).foundation())(scope); } } }) 

applied in partial:

 <div testdirective></div> 

Answer 1

Do it:

 link: function(scope, element, attrs) { $compile(element.contents())(scope); $(document).foundation(); } 

If you compile the element itself, you create an infinite loop:

$compile(element)(scope); //fail

Always make sure that you only compile the contents of the element:

$compile(element.contents())(scope); //win

It seems that you are compiling the entire document and creating an endless loop.

Perhaps you can just do this:

 templateUrl: 'partials/includes/nav.html', compile: function() { $(document).foundation(); } 

because the template will be automatically compiled, so you do not have to do it manually.

Note. It is recommended that you use and use Angular $document , which is a wrapper for document , which helps in testing. $($document).foundation();