Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
davidd4 opened this Issue · 10 comments

4 participants

@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

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