Onsen UI ons-splitter-side 事件不起作用答案

【问题标题】：Onsen UI ons-splitter-side events don't workOnsen UI ons-splitter-side 事件不起作用
【发布时间】：2016-10-31 15:08:27
【问题描述】：

我正在尝试让 postopen 和 postclose 事件正常工作，但我似乎没有任何运气。

我按照这里的说明进行操作：

https://onsen.io/v2/docs/angular1/ons-splitter-side.html#event-postclose

所以我的代码的要点是这样的：

<ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
  <ons-splitter-side ons-postopen="ons.notification.alert(1);" side="left" width="220px" collapse swipeable>
    <ons-page>
      left
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="mySplitter.left.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

但结果是没有任何东西被触发，就好像没有ons-postopen 属性一样。

【问题讨论】：

正如文档所说，可选。仅在初始化期间有效。因此，如果您在 init 之后尝试，则使用内联声明将无法正常工作。我建议在项目上放置一个事件监听器。
我不明白我在初始化期间如何使用它。我认为内联声明是在初始化期间执行此操作的方法。你能提供更多细节吗？
很抱歉没有使用 Angular，但我做了一个普通的例子，希望能帮助阐明如何使用它。 codepen.io/anon/pen/rWNvXL?editors=1011
这实际上非常有用，完全解决了我的问题。如果您将此作为答案发布，我会将其标记为正确。我仍然不明白“仅在初始化期间有效”的含义以及 ons-<event-name> 属性如何工作。但是无论如何我都不需要它们。非常感谢。
完成，谢谢！

标签： javascript angularjs onsen-ui2

【解决方案1】：

虽然我对如何在初始化期间利用这些事件没有很好的答案，但您可以通过使用事件侦听器来访问它们，例如：

document.getElementById('menu').addEventListener('preopen',function(e){
  console.log('preopen event');
});

这在此代码笔中得到了演示：https://codepen.io/anon/pen/rWNvXL?editors=1011

【讨论】：

...这是同一解决方案的角度示例：codepen.io/toramanlis/pen/xRxaNq?&editors=101