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



  • 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;
                    }]);
    


  • @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.



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



  • @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.


Log in to reply