角 1.5.0.通过 ocLazyLoad 使用 UI GRID 重新加载页面时，会复制根模板.$$animateJs 未定义 [英] Angular 1.5.0. Root Template is duplicated when reloading the page with UI GRID via ocLazyLoad. $$animateJs is undefined

问题描述

我正在使用:

• Angular 和 angular-animate 都是 v.1.5.0
• Angular UI 网格 v.3.1.1
• ocLazyLoad v.1.0.9
• Angular ui 路由器 v.0.2.18

错误是:

TypeError: $$animateJs 不是函数在 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)

<块引用>

当我刷新包含 UI Grid
和
的页面时会发生此错误UI Grid 模块由 ocLazyLoad 加载.

如果我将 UI Grid 脚本放在 <'body'> 中，一切正常.就在我使用 ocLazyLoad 时.

其他页面工作正常.当我改变状态时也能正常工作.只有在刷新时.
不管是F5还是Ctrl + F5

<块引用>

我见过的最奇怪的事情是我的根模板被复制了

更新:

<块引用>

我已将项目示例上传到 GITHUB

所以初始状态是没有 GRID 的 $state

如果您在状态之间切换，一切正常.
但是
如果您在网格状态上重新加载页面或将初始状态更改为带有网格的状态整个模板都将重复.
这样做的原因是角度动画.如果关闭，一切正常.

谢谢！

解决方案

很高兴看到您的 chrome 开发工具的网络选项卡.我怀疑加载东西的顺序是错误的".

查看ui.grid的一些代码，我实际上发现了一个以(可能也是)动态方式(在这种情况下)检查ngAnimate的部分:

//禁用元素上的 ngAnimate 动画禁用动画:函数(元素){var $animate;尝试 {$animate = $injector.get('$animate');//见:http://brianhann.com/angular-1-4-break-changes-to-be-aware-of/#animateif (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) {$animate.enabled(element, false);} 别的 {$animate.enabled(false, element);}}抓住 (e) {}},启用动画:功能(元素){var $animate;尝试 {$animate = $injector.get('$animate');//见:http://brianhann.com/angular-1-4-break-changes-to-be-aware-of/#animateif (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) {$animate.enabled(element, true);} 别的 {$animate.enabled(true, element);}返回 $animate;}抓住 (e) {}},

现在，我不知道为什么 ui.grid 实际上摆弄动画，但我可以想象一些关于加载顺序的问题.

这是一个加载顺序错误.当使用 ocLazyLoad 加载 ngAnimate 并确保它在 ui.grid 之前加载时，它可以工作.

假设您已将 ngAnimate 作为模块添加到 LazyLoad，您的状态解析必须更改为:

resolve: load(['ngAnimate', 'ui.grid', 'grid/GridController.js'])

当然这并不理想，因为进入网格状态后加载时间会增加，但我现在太累了，无法进一步研究.至少现在你知道它肯定与加载顺序有关.

edit2:另一个解决方案(如果你总是包含 ngAnimate):

在您的 router.config 中，尝试以下加载功能

function load(srcs, callback) {返回 {deps: ['$$animateJS', '$ocLazyLoad', '$q',函数 ($$animateJS, $ocLazyLoad, $q) {...}]};}

I'm using:

• Angular, angular-animate both are 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 is not a function
    at d (angular-animate.js:2141)
    at angular-animate.js:2131
    at h (angular-animate.js:3174)
    at Array.d.push.fn (angular-animate.js:3020)
    at c (angular-animate.js:423)
    at b (angular-animate.js:393)
    at angular-animate.js:3042
    at m.$digest (angular.js:16714)
    at m.$apply (angular.js:16928)
    at g (angular.js:11266)

This error occurs when I refresh the page which contains UI Grid
and
UI Grid module is loaded by ocLazyLoad.

If I place UI Grid script in <'body'> all work fine. Just when I use ocLazyLoad.

Other pages work fine. When I change state also works fine. Only when refreshing.
Not matter if it is F5 or Ctrl + F5

The most strange thing I've seen is that my root template is duplicated

UPDATE:

I've uploaded project sample to GITHUB

So the initial state is $state without GRID

If you switch between the states everything works fine.
BUT
If you reload a page on grid state or change initial state to state with grid entire template is duplicated.
The reason of this is angular-animate. If it is turned off everything is OK.

Thanks!

解决方案

It would be nice to see the network tab of your chrome dev-tools. I suspect the order in which things are loaded to be 'wrong'.

Looking through some code of ui.grid, I actually found a part that checks for ngAnimate in a (possibly too) dynamic way (in this case):

// Disable ngAnimate animations on an 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, I am not sure why ui.grid actually fiddles around with animations, but I could imagine some problems concerning the order in which things are loaded.

edit: It's a load-order bug. When loading ngAnimate with ocLazyLoad and ensuring it's loaded before ui.grid, it works.

Presuming you've added ngAnimate as a module to LazyLoad, your state's resolve has to be changed to:

resolve: load(['ngAnimate', 'ui.grid', 'grid/GridController.js'])

Of course this isn't ideal, as loading time is increased upon entering the grid-state, but I'm too tired to look further into it right now. At least now you know that it definitely has to do with the loading order.

edit2: Another solution (in case you always include ngAnimate):

In your router.config, try the following for the load function

function load(srcs, callback) {
    return {
        deps: ['$$animateJS', '$ocLazyLoad', '$q',
                function ($$animateJS, $ocLazyLoad, $q) {
                    ...
        }]
    };
}

这篇关于角 1.5.0.通过 ocLazyLoad 使用 UI GRID 重新加载页面时，会复制根模板.$$animateJs 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！