1

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.

toraman
  • 598
  • 4
  • 14
  • 1
    As the docs say, Optional. Works only during initialization. So if you are trying after init, it will not work using inline declaration. I recommend putting an event listener on the item. – Munsterlander Nov 04 '16 at 01:46
  • I don't understand how I use this during initialization. I thought inline declaration was the way to do it during initialization. Can you give more details? – toraman Nov 04 '16 at 13:35
  • 1
    Apologies for not working with Angular, but I made a vanilla example and I hope that can help clarify how to use it. https://codepen.io/anon/pen/rWNvXL?editors=1011 – Munsterlander Nov 04 '16 at 14:59
  • 1
    This is actually perfectly helpful and solves my problem entirely. If you post this as an answer I will mark it correct. I still don't understand what they mean by "works only during initialization" and how the `ons-` attributes work though. However I don't need them anyway. Thank you so much. – toraman Nov 04 '16 at 15:52
  • Done and thank you! – Munsterlander Nov 04 '16 at 16:20
  • After my issue is solved my research took another direction and I have come to a conclusion that this is an Onse UI bug. Onsen with angular js should always work the `ons-` attributes as I expected as it does with `ons-navigator`'s `ons-prepush` and etc. which also say "works only during initialization". I am going to report this bug now and share the results under this question. – toraman Nov 04 '16 at 16:22

1 Answers1

1

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

Munsterlander
  • 1,356
  • 1
  • 16
  • 29
  • 1
    ...and this is the angular example of the same solution :https://codepen.io/toramanlis/pen/xRxaNq?&editors=101 – toraman Nov 04 '16 at 17:28