AngularJS: initialize ZURB Foundation JS

Question

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?

Answer 1

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.

Answer 2

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. E.g.:

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

Answer 3

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.