angularjs与jquery-mobile的标题不兼容

时间:2013-01-28 01:32:03

标签: javascript jquery-mobile angularjs

我似乎遇到了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之外时,这可以正常工作 在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">&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>

当我试图输入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>

是否有一种简单的方法可以让两个平台表现得很好?

1 个答案:

答案 0 :(得分:-1)