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

davidd4 opened this Issue Oct 25, 2012 · 10 comments


None yet
4 participants

davidd4 commented Oct 25, 2012

Footer without directive is working fine : http://jsfiddle.net/ZxeD2/

Footer with directive is not working: http://jsfiddle.net/dAqRX/

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.

davidd4 commented Oct 26, 2012

That is nice. However is allowed to do it?
In angular developer giude (http://docs.angularjs.org/guide/directive) 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.

davidd4 commented Oct 26, 2012

Ok, then thx for the solution :)

davidd4 commented Oct 26, 2012

Here is a sample with booth header and footer: http://jsfiddle.net/M9z5S/
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.


tbosch commented Oct 29, 2012

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).


tbosch commented Dec 6, 2012

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?


tbosch commented Jun 12, 2013

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: https://github.com/opitzconsulting/angular-jqm

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


@tbosch tbosch closed this Jun 12, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment