jquery-mobile のヘッダーと angularjs で問題が発生しているようです。
問題は、標準の jquery-mobile ヘッダーを配置しようとしていることです。
<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>
これは、ヘッダーが ng-view の外にある場合に期待どおりに機能します。
クロムでは、次の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"> </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"> </span></span></a>
</div>
ng-view を配置しようとすると、angularjs が ng-scope を div に配置するため、競合が発生します。これは、出力される最終的なコントロールです
<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>
2 つのプラットフォームを適切に動作させる簡単な方法はありますか?