Question

I seem to be running into a problem with jquery-mobile’s header and angularjs.

the issue is i’m trying to place a standard jquery-mobile header.

<div data-role="header">
    <a href="index.html" data-icon="delete">Cancel</a>
    <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check">Save</a>
</div>

This works as expected when the header is outside of a ng-view.
in chrome, I see the following html.

<div data-role="header" class="ui-header ui-bar-a" role="banner">
    <a href="index.html" data-icon="delete" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-icon-left" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Cancel</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a>
    <h1 class="ui-title" role="heading" aria-level="1">Edit Contact</h1>
    <a href="index.html" data-icon="check" class="ui-btn-right ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-icon-left" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Save</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
</div>

When I’m trying to put in a ng-view, angularjs puts a ng-scope on the div, which now produces a conflict. This is the final control being outputed

<div ng-view>
     <div data-role="header" class="ng-scope">
         <a href="index.html" data-icon="delete">Cancel</a>
         <h1>Edit Contact</h1>
         <a href="index.html" data-icon="check">Save</a>
     </div>
</div>

Is there a simple way to get the two platforms to behave nicely?

Answer 1

Found this solution in google groups

https://groups.google.com/forum/?fromgroups=#!searchin/angular/jquery$20mobile/angular/-BufJRGQ6-M/bYa6AfCSTVYJ