angularjs - 更改 ui-view 指令处理页面转换的方式

Question

编辑:不要这样做。 除非你想花几个小时调试，否则这是浪费时间，事实证明这比我最初想象的要复杂得多。目前解决这个问题的方法是:

将资源的加载从解析器移到 Controller 中。

移除所有由 ui-router 处理的进入动画。

添加您自己的动画初始化并使用 ng-class 将类输入到主范围。

使用 $scope.$emit从特定于页面的 Controller 中通知主 Controller 何时完成加载。

简而言之，如果你需要这个(我在 ui-router 问题跟踪器上看到了一些问题)不要使用解析器或 ng-animate 来输入动画。您也不能在 $stateChangeStart 上执行此操作事件和离开动画，因为这与 ui-router 的工作方式相冲突。

下面是我原来的问题。

我有一个特定的用例，我需要页面转换并解析以特定顺序发生，目前它们是这样发生的:

resolve > animate out > animate in

我更需要它:

animate out > resolve > animate in

我决定查看 ui-router 源代码并找出它为什么会这样。幸运的是，这是一个非常简单的模组。在 ui-view 指令中，我们有这个代码。

scope.$on('$stateChangeSuccess', function() {
    updateView(false); // cleanupLastView(); is at the end of this function
});
scope.$on('$viewContentLoading', function() {
    updateView(false); // cleanupLastView(); is at the end of this function
});

我需要将其更新为:

scope.$on('$stateChangeStart', function() {
    cleanupLastView();
});
scope.$on('$stateChangeSuccess', function() {
    updateView(false); // remove cleanupLastView();
});
scope.$on('$viewContentLoading', function() {
    updateView(false); // remove cleanupLastView();
});

问题是，出于显而易见的原因，我不想去破解核心。有什么办法可以“注销”ui-router的 ui-view指令并告诉它使用我的一个代替？

Answer 1

所以我实际上写了这个问题，然后找到了答案。将其发布给其他人在互联网上的旅行。

答案是复制两者 ui-view 指令并简单地添加一个名为(例如)rich97-view 的新指令.然后你可以在你的 View 中使用它，就像你在使用 ui-view 一样。这种方法的优点在于 mod 仅适用于您需要的地方，默认行为保持不变。