I am using both AngularJS and Foundation.
To initialize Foundation JS, you have to make the following call:
$(document).foundation();
What would be the best way to make this call in an AngularJS application? Code examples would be appreciated.
Also, if I were to write a directive around a Foundation JS component, how could I ensure that Foundation is initialized?
Here is my take, in app.js
:
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation();
});
});
which will re-initialize Foundation when a new view is loaded (so that the components contained in the new view are also initialized). This way, your controllers do not need to be aware of this.
You could $apply
the code in order to bring it into the Angular framework. Here is an example using $rootScope
with run
and this could also be done inside a controller/directive with any $scope
:
app.run(function($rootScope){
$rootScope.$apply($(document).foundation());
});
Another option::
$compile($(document).foundation())($scope);
Be sure to include the $compile
service in your controller/directive to use it this way. Eg:
app.directive('mydirective', function($compile) {
return {
link: function(scope, element, attrs) {
$compile($(document).foundation())(scope);
}
}
});
There is a native angularJs support for foundation. Check out Angular Foundation .
Angular Foundation is a port of the AngularUI team's excellent angular-bootstrap project for use in the Foundation framework.
It has no dependencies but angular library itself and foundation CSS only.
One method that I've been using is to just include a <script>
tag at the end of my partial / template.
This way, I can target just the new content of each partial -- instead of making foundation js re-parse the whole DOM.
for example, in my 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>
Especially if your app has a lot of DOM elements on the page, this can improve perfomance considerably.
Try the following code:
app.run(function($timeout){
$timeout(function() {
$(document).foundation();
}, 500);
});
It solved my issue trying to get Foundation reveal working.
For TypeScript Angular 4 (or 2) projects using Components:
According to the given blog post, declare $ as a variable in the component and then call $(document).foundation();
in ngOnInit()
worked for me!
With Angular, components are injected into the DOM after Foundation has loaded. When you load up a new component, and inject it, Foundation doesn't know it's there. We need to tell Foundation to reinitialize and bind again, so these attributes will get wired up. http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/
{ import Component } from '@angular/core';
declare let $: any; // TO ACCESS JQUERY '$' FUNCTION
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
// other stuff here
});
export class MyComponent implements OnInit {
constructor() {}
ngOnInit() {
$(document).foundation(); // CALL foundation() INITIALIZATION FUNCTION FROM HERE
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.