javascript - Angular 1.5.0. Root Template is duplicated when reloading the page with UI GRID via ocLazyLoad. $$animateJs is undefined -
i'm using:
- angular, angular-animate both v. 1.5.0
- angular ui grid v. 3.1.1
- oclazyload v. 1.0.9
- angular ui router v. 0.2.18
the error is:
typeerror: $$animatejs not function @ d (angular-animate.js:2141) @ angular-animate.js:2131 @ h (angular-animate.js:3174) @ array.d.push.fn (angular-animate.js:3020) @ c (angular-animate.js:423) @ b (angular-animate.js:393) @ angular-animate.js:3042 @ m.$digest (angular.js:16714) @ m.$apply (angular.js:16928) @ g (angular.js:11266)
this error occurs when refresh page contains ui grid
and
ui grid module loaded oclazyload.
if place ui grid script in <'body'> work fine. when use oclazyload.
other pages work fine. when change state works fine. when refreshing.
not matter if f5 or ctrl + f5
the strange thing i've seen root template duplicated
update:
i've uploaded project sample github
so initial state $state without grid
if switch between states works fine.
but
if reload page on grid state or change initial state state grid entire template duplicated.
reason of angular-animate. if turned off ok.
thanks!
it nice see network tab of chrome dev-tools. suspect order in things loaded 'wrong'.
looking through code of ui.grid, found part checks nganimate in (possibly too) dynamic way (in case):
// disable nganimate animations on element disableanimations: function (element) { var $animate; try { $animate = $injector.get('$animate'); // see: http://brianhann.com/angular-1-4-breaking-changes-to-be-aware-of/#animate if (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) { $animate.enabled(element, false); } else { $animate.enabled(false, element); } } catch (e) {} }, enableanimations: function (element) { var $animate; try { $animate = $injector.get('$animate'); // see: http://brianhann.com/angular-1-4-breaking-changes-to-be-aware-of/#animate if (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) { $animate.enabled(element, true); } else { $animate.enabled(true, element); } return $animate; } catch (e) {} },
now, not sure why ui.grid fiddles around animations, imagine problems concerning order in things loaded.
edit: it's load-order bug. when loading nganimate oclazyload , ensuring it's loaded before ui.grid, works.
presuming you've added nganimate module lazyload, state's resolve has changed to:
resolve: load(['nganimate', 'ui.grid', 'grid/gridcontroller.js'])
of course isn't ideal, loading time increased upon entering grid-state, i'm tired further right now. @ least know has loading order.
edit2: solution (in case include nganimate):
in router.config, try following load function
function load(srcs, callback) { return { deps: ['$$animatejs', '$oclazyload', '$q', function ($$animatejs, $oclazyload, $q) { ... }] }; }
Comments
Post a Comment