我似乎遇到了 jquery-mobile 的 header 和 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 之外时，这将按预期工作。
在 chrome 中，我看到以下 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 会在 div 上放置一个 ng-scope，这会产生冲突。这是输出的最终控制
<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>
有没有一种简单的方法可以让两个平台表现得很好？