Question

我有一个在3个不同模板之间交换的ui-view。但其中一个要求是模板根据每个模板中单击的链接从左侧或右侧滑入和滑出。

现在我面临的问题是以下几点：

<div ui-view class='list' ng-class="{'slide-left':myCon.direction=='left','slide-right:myCon.direction=='right'}">
    <a ng-click="myCon.setDirectionAndGoToState('right')">slide Right</a>
    <a ng-click="myCon.setDirectionAndGoToState('left')">slide Left</a>
</div>

我通过Chrome的开发者工具在DOM中看到的是，当“右侧滑动”链接发生点击时，ui-view元素（离开和新生成的元素）都得到了正确的结果.slide-right个班级。然后离开的ui-view元素消失，活动的ui-view元素具有.slide-right类。现在，如果我要点击“向左滑动”链接，则离开的ui-view已应用.slide-left类，但新生成的输入ui-view仍然应用了.slide-right类。大概是从它复制的时候......因此暗示在ng-click事件触发的函数中执行的$state.go的重复实际上是在ng-class之前发生的。或者至少那是我得到的暗示......

有没有人知道这是不是实际发生的......如果是，有没有办法让我改变顺序，以便在控制器中设置新方向后评估ng-class ，并且$ state.go仅在之后执行复制？

谢谢！

Answer 1

您没有包含setDirectionAndGoToState()功能的内容，但如果您只想控制操作顺序，那么操作起来相当简单。请记住，Javascript是单线程的。 AngularJS“摘要”机制在每个事件处理周期的最后运行，这就是你的ng-class表达式之类的评估。如果$state.go(...)这样的事情对你来说太早执行，只需将它们移到“下一个刻度”即可。这是通常的伎俩：

$scope.setDirectionAndGoToState = function(direction) {
    $scope.direction = direction;
    $timeout(function() {
        $state.go('newstate');
    }, 0);
};

以这种方式调用超时将推迟执行代码，直到“下一个滴答” - 在摘要周期运行之后。这将使类在转换到新状态之前得到应用。显然，您可以混合使用此机制（甚至嵌套它们）以精确控制排序。

请注意，虽然这对于状态转换等偶然事件来说很好，但确实会引入一些延迟 - 没有回调是零毫秒。我不建议将此用于像window-resize事件处理程序这样的东西 - 这些情况还有其他技巧。

on-click，ng-class＆amp; amp;的执行顺序$ digest周期

1 个答案: