AngularJS温泉UI滑动菜单DIV鼠标不起作用

示例：

JSFiddle

<body ng-app="app">
<div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
</body>

它有效

但是如果我添加滑动菜单不起作用：

JSFiddle

<body ng-app="app">
<ons-sliding-menu
    menu-page="menu.html" main-page="hola.html" side="left"
  </ons-sliding-menu>
    <ons-template id="hola.html">
      <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
                                </div>
  </ons-template>
</body>

JavaScript：

angular.module('app', ['onsen']);

提前致谢

这是带有代码的滑动菜单的代码笔 - 它阻止了用户输入，我不确定他们为什么这样做，但 css 至少覆盖了 chrome 中的功能。 https://codepen.io/anon/pen/rLxPOa 一般来说，你应该将代码包装在 ons-page 中。

此外，我认为滑动菜单已降级为 Angular 1 绑定，并建议使用 ons-splitter .它是相同的功能，但有更多选项，最重要的是，没有CSS黑客来使其工作。

这是一个功能正常的代码笔，显示您的div 工作但改用拆分器：https://codepen.io/anon/pen/qNbgZR?editors=101

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
        </div>
  </ons-page>
</ons-template>

相关内容

最新更新

热门标签：