3. Encountering _animatorDict is undefined when using ons-splitter with angular1 for 2.0.0-rc.4

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Encountering _animatorDict is undefined when using ons-splitter with angular1 for 2.0.0-rc.4

  • A

    I am working with OnsenUI 2.0.0-rc.4 with angular 1.4. I am trying to create a bare implementation of ons-splitter but I am receiving an “cannot read property ‘__animatorDict’ of undefined” at ons-splitter-side.js@442 where “animators: window.OnsSplitterElement._animatorDict”.

    I verified that OnsSplitterElement property is undefined.

    I reviewed the docs and cannot see a solution to these undefines. Is this an issue with how I am integrating angular1 with ons-splitter?

    Thanks,

    Aaron

    My Jade source follows:

    body(ng-controller="MainController as main")
        ons-splitter
            ons-splitter-side(var="menu" side="left" width="220px" collapse swipeable)
                ons-page
                    ons-list
                        ons-list-item(ng-click="main.onMenuClick('walking')" tappable)
                            | Walking
                        ons-list-item(ng-click="main.onMenuClick('lookup')" tappable)
                            | Lookup
                        ons-list-item(ng-click="main.onMenuClick('poll')" tappable)
                            | Poll
            ons-splitter-content(page="walking.html")
        ons-template(id="walking.html")
            ons-page
                ons-toolbar
                    div.left
                        ons-toolbar-button(ng-click="main.openMenu()")
                            ons-icon(icon="md-icon")
                    div.center
                        | Walking
                p
                    | Test
        ons-template(id="lookup.html")
            ons-page
                ons-toolbar
                    div.left
                        ons-toolbar-button(ng-click="main.openMenu()")
                            ons-icon(icon="md-icon")
                    div.center
                        | Lookup
                p
                    | Test
        ons-template(id="poll.html")
            ons-page
                ons-toolbar
                    div.left
                        ons-toolbar-button(ng-click="main.openMenu()")
                            ons-icon(icon="md-icon")
                    div.center
                        | Poll
                p
                    | Test

        //- Libraries
        script(src='/bower_components/OnsenUI/js/onsenui.js')
        script(src='/bower_components/angular/angular.js')
        script(src='/bower_components/OnsenUI/js/angular-onsenui.js')

        script(type='text/javascript').
            ons.bootstrap('main',[])
                .controller('MainController',['$http',function($http) {
                    var vm = this;
                }]);
    0

  • @aboteler I don’t think there is anything wrong with your code. There was an issue with the <ons-splitter> component where the <ons-splitter-side> element was registered before it’s parent. This only happened if you load the JS at the end of the body.

    This has been fixed now so it will work fine in the next version.

    1
    A
     1 Reply
  • A

    @argelius Thanks. I will for now move the JS declaration to the top.

    0

  • @aboteler I hope it works fine for you. In the next version you will be able to put the <script> tags at the bottom without any problem.

    0