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

[davidd4]

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

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

[mlegenhausen]

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
                    element.parent().trigger("pagecreate");
                };
            }
        };
    });

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

[davidd4]

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.

[mlegenhausen]

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]

Ok, then thx for the solution :)

[davidd4]

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

[mlegenhausen]

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

[tbosch]

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

[tbosch]

Hi, 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

[alejandrocao]

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

[tbosch]

Hi, 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.

Tobias