Angular 1.5.0。通过 ocLazyLoad 使用 UI GRID 重新加载页面时，根模板会重复。 $$animateJs 未定义

Question

我正在使用：

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

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

的时候其他页面工作正常。当我改变状态时也能正常工作。仅在刷新时。
不管是F5还是Ctrl+F5

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

更新：

I've uploaded project sample to GITHUB

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

如果您在状态之间切换，一切正常。
但是
如果您重新加载网格状态的页面或将初始状态更改为网格状态 整个模板被复制.
这样做的原因是angular-animate。如果它被关闭，一切正常。

谢谢！

Answer 1

很高兴看到 chrome 开发工具的网络选项卡。我怀疑加载内容的顺序是 'wrong'。

查看 ui.grid 的一些代码，我实际上找到了一个以（可能也是）动态方式（在本例中）检查 ngAnimate 的部分：

// 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) {}
},

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

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

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

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

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

edit2: 另一个解决方案（如果你总是包含 ngAnimate）：

在您的 router.config 中，尝试以下加载函数

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

Answer 2

这就是为我修复的问题（基于 JanS 的回答）

        .state('app.myroute', {
            url: '/my-route',
            title: 'My Route',
            controller: 'MyRouteController',
            controllerAs: 'myRoute',
            templateUrl: helper.basepath('my-route.html'),
            resolve : {
                ngAnimate : ['$$animateJs','$ocLazyLoad', function ($$animateJs, $ocLazyLoad) {
                    return $ocLazyLoad.load([
                        'vendor/angular-ui-grid/ui-grid.min.css',
                        'vendor/angular-ui-grid/ui-grid.min.js'
                    ])
                }]
            }
        })

Angular 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

javascript

angularjs

angular-ui-grid

oclazyload