Skip to content


Subversion checkout URL

You can clone with
Download ZIP


jqm header/footer cannot be included as an agular component (directive) #66

davidd4 opened this Issue · 10 comments

4 participants


Footer without directive is working fine :

Footer with directive is not working:


I created a working header directive:

    directives.directive('header', function() {
        return {
            priority: 1000,
            terminal: true,
            transclude: true,
            restrict: 'E',
            templateUrl: 'templates/header.html',
            replace: true,
            compile: function(element, attr, transclude) {
                return function (scope, element, attr) {
                    // Needed for retriggering jquery mobile

The trick is to call pagecreate after creation else jquery mobile does not render your directive.


That is nice. However is allowed to do it?
In angular developer giude ( I found this:

Compile function

function compile(tElement, tAttrs, transclude) { ... }

  • tElement - template element - The element where the directive has been declared. It is safe to do template transformation on the element and child elements only.

Sure but we do not make any transformation ;) We only trigger an event (which I would say is not a transformation). This is the same way as the jqm adapter does DOM updating internally.


Ok, then thx for the solution :)


Here is a sample with booth header and footer:
The toolbars are already displayed correct, but the content is not.


I currently don't know why they are not displayed correctly. We currently don't use such complex layouts in headers and footers.


Hello all,
thanks for submitting this and for the solutions so far.
You are right, the jqm adapter is already doing this. However, if a directive only loads a snippet of a page, it only triggers a "create" event, but not a "pagecreate" event.

Well, firing the pagecreate event means DOM manipulation, as all the jquery mobile widgets listen for this and create themselves. However, angular does allow to modify children elements in the post link phase....

Anyway, thanks for the temporary solution and I will fix this soon (should only be the replacement of the two events).


sorry, it is not that easy as I thought.
For now, we don't support putting the header, body or footer into an own directive..



Tobias, do you have any news about that issue? It would be intresting to add this feature. Is there any workaround?


this will probably never land in the jquery-mobile-angular-adapter. However, note that we are rebuilding the adapter using the css of jqm only. There we have the full flexibility of angular and it should be easy to do it there.

Have a look here:

Closing this, as we won't implement it in this project but in angular-jqm.


@tbosch tbosch closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.