Closed davidd4 closed 11 years ago
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.
That is nice. However is allowed to do it? In angular developer giude (http://docs.angularjs.org/guide/directive) I found this:
function compile(tElement, tAttrs, transclude) { ... }
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: 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.
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
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
Tobias, do you have any news about that issue? It would be intresting to add this feature. Is there any workaround?
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
Footer without directive is working fine : http://jsfiddle.net/ZxeD2/
Footer with directive is not working: http://jsfiddle.net/dAqRX/