toraman toraman - 1 month ago 19
AngularJS Question

Onsen UI ons-splitter-side events don't work

I am trying to get the

postopen
and
postclose
events working but I don't seem to have any luck.

I follow the instructions here:

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

So the gist of my code is like this:

<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>


But the result is that nothing is fired as if there was no
ons-postopen
attribute.

Answer

While I don't have a good answer on how to utilize those event during initialization, you can access them by using event listeners, such as:

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

This is demonstrated in this codepen: https://codepen.io/anon/pen/rWNvXL?editors=1011