AngularJS: ZUB Foundation JS initialisieren

Question

Ich verwende AngularJS und Foundation.

Foundation JS initialisieren, müssen Sie den folgenden Anruf:

$(document).foundation(); 

Was wäre der beste Weg sein, diesen Aufruf in einer AngularJS Anwendung zu machen? Codebeispiele würden geschätzt werden.

Wenn ich eine Anweisung für eine Foundation JS-Komponente schreiben würde, wie kann ich sicherstellen, dass Foundation initialisiert wird?

Answer 1

Sie könnten $apply den Code, um es in das Angular-Framework zu bringen. Hier ist ein Beispiel unter Verwendung von $rootScope mit run und dies auch in einem Controller/directive mit jedem $scope getan werden könnte:

app.run(function($rootScope){ 
    $rootScope.$apply($(document).foundation()); 
}); 

Eine weitere Option ::

$compile($(document).foundation())($scope); 

unbedingt den $compile Service enthält in Ihrem Controller/Direktive, um es auf diese Weise zu verwenden. ZB:

app.directive('mydirective', function($compile) { 
    return { 
     link: function(scope, element, attrs) { 
      $compile($(document).foundation())(scope); 
     } 
    } 
}); 

Answer 2

Hier ist mein nehmen, in app.js:

.run(function($rootScope) { 
    $rootScope.$on('$viewContentLoaded', function() { 
     $(document).foundation(); 
    }); 
}); 

die Stiftung neu initialisieren, wenn eine neue Ansicht geladen wird (so dass die in der neuen Ansicht enthaltenen Komponenten werden auch initialisiert) . Auf diese Weise müssen sich Ihre Controller nicht bewusst sein.

Answer 3

Versuchen Sie, den folgenden Code:

app.run(function($timeout){ 
    $timeout(function() { 
     $(document).foundation(); 
    }, 500); 
}); 

Es ist mein Problem gelöst versucht Foundation zu erhalten offenbaren arbeiten.

Answer 4

Eine Methode, die ich verwendet habe, ist nur ein <script> Tag am Ende meiner Teil/Vorlage enthalten.

Auf diese Weise kann ich Ziel nur den neuen Inhalt von jedem Teil - statt Fundament js das gesamte DOM neu zu parsen.

zum Beispiel in meinem header.html:

<header id="app-header"> 
    <h1>Logo</h1> 
    <dl class="accordion" data-accordion> 
    <dd> 
     <a href="#panel1">Panel 1</a> 
     <div id="panel1" class="content"> 
     Loren Ipsum blah blah blah.... 
     </div> 
    </dd> 
    </dl> 
</header> 

<!-- add this tag on bottom of template/partial --> 
<script>$('#app-header').foundation();</script> 

Vor allem, wenn Sie Ihre App eine Menge DOM-Elemente auf der Seite hat, kann diese perfomance erheblich verbessern.

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.