角1.5.0当通过ocLazyLoad用UI网格重新加载页面时，根模板会被复制。$$animateJs未定义

Question

我在用：

• 角，角-动画都是v. 5.0
• 角UI网格诉3.1.1
• ocLazyLoad 诉1.0.9
• 角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)

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

如果我将UI网格脚本放在<'body'>中，所有这些都可以正常工作。就在我使用ocLazyLoad的时候。

其他的页很好用。当我改变状态时，状态也很好。只有在提神的时候。

不管是F5还是Ctrl + F5

最奇怪的是我的根模板被复制了

​

​

更新：

我已经将项目示例上传到GITHUB

，所以初始状态是$state，没有网格

如果你在各州之间切换一切都很好。

但

如果在网格状态下重新加载页面，或者使用网格将初始状态更改为状态，则整个模板将被复制为。

原因是angular-animate.如果关机，一切都会好的。

谢谢!

Answer 1

很高兴看到你的铬开发工具的网络标签。我怀疑装货的顺序是“错误的”。

通过查看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实际上摆弄动画，但我可以想象一些问题的顺序，东西是加载。

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

假设您已经将ngAnimate作为模块添加到LazyLoad中，则必须将状态的决心更改为：

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

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

edit2：另一种解决方案(万一总是包括ngAnimate)：

在您的router.config中，为load函数尝试以下操作

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

Answer 2

这就是我的解决办法(基于詹斯的回答)

        .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'
                    ])
                }]
            }
        })