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

2023年6月9日 115次阅读

编辑：不要这样做.这是浪费时间,除非你想花几个小时调试,结果这比我想象的要复杂得多.目前解决方案是：

>将资源的加载移出解析器并进入控制器.
>删除ui-router处理的所有输入动画.
>添加您自己的动画init,并使用ng-class将类输入到主范围.
>使用$scope.$发出特定于页面的控制器,告诉主控制器何时完成加载.

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

以下是我原来的问题.

我有一个特定的用例,我需要页面转换,并按照特定顺序解决,目前它们发生如下：

resolve > animate out > animate in

我需要它更像这样：

animate out > resolve > animate in

我决定查看ui-router源代码并找出它的行为方式.幸运的是,它是一个非常简单的mod.在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指令并告诉它使用我的一个？

最佳答案 所以我实际上写了这个问题然后找到答案.在互联网上旅行的任何人发布它.

答案是复制两个ui-view指令并简单地添加一个名为(例如)rich97-view的新指令.然后,您可以在视图中使用它,就像使用ui-view一样.这个方法的好处是mod只适用于你需要它的地方,默认行为是不变的.

点赞