Инициализировать Zurb Foundation 5 в директиве AngularJS

Question

Я создал три планшета, чтобы проиллюстрировать мою проблему. Я пытаюсь создать директиву AngularJS, которая инициализирует основание и применит необходимый javascript к загруженному шаблону. Сначала я пытался использовать ngInclude для добавления навигационной панели Foundation 5 на все страницы моего веб-сайта. Верхняя панель работает так, как ожидалось, когда html непосредственно применяется к частичной. Когда html добавляется в директиве, такой как ngInclude, верхний бар теряет все свои функциональные возможности. Я подозреваю, что это произошло потому, что фундамент не инициализируется после добавления шаблона директивой. В качестве решения я создал настраиваемую директиву, которая инициализировала бы фундамент и скомпилировала html-шаблон. Инициализация фундамента так, как я делаю, замораживает приложение. У кого-нибудь есть решение?

Пытается достичь этого, не прибегая к Угловому интерфейсу.

Пример 1: HTML непосредственно применяется к представлению. Работает так, как ожидалось, когда вы нажимаете на раскрывающееся меню, страницы отображаются.

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

Пример 2: ngInclude используется для загрузки шаблона в DOM. Никакой функциональности не достигается, когда вы нажимаете на раскрывающееся меню, ничего не происходит.

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

Пример 3: Создана отдельная директива, чтобы заменить ngInclude что бы инициализировать базу, скомпилировать и загрузить шаблон в DOM. Не может предоставить plunkr, потому что он просто замерзнет, ​​но вот код.

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

применяется частичное путем:

<div testdirective></div> 

Answer 1

ли это:

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

Если скомпилировать сам элемент, вы создаете бесконечный цикл:

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

Всегда убедитесь, что вы только компилировать содержимое элемента:

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

кажется, что вы компилируете весь документ и создать бесконечный цикл.

Вы можете, вероятно, просто сделать это:

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

, так как шаблон будет автоматически составлен таким образом Вы не должны делать это вручную.

Примечание: рекомендуется вводить и использовать Angular's $document, который является оберткой для document, которая помогает в тестировании. $($document).foundation();