执行点击，ng级和$摘要循环的顺序

Question

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

现在我面临的问题，是沿着以下的说法：

<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视图元素（包括离开和新生成的元素）都会得到正确的.slide-right类。 然后离开的ui-view元素消失，活动的ui-view元素的类别为.slide-right。 现在，如果我要然后单击“向左滑动”链接，则离开的ui视图将应用.slide-left类，但新生成的进入ui-view仍然应用.slide-right类...可能从它被复制时...因此这意味着在由ng-click事件触发的函数中执行的$state.go的重复实际发生在ng-class之前。或至少这就是我得到的暗示......

有没有人有任何想法，如果这是实际发生的事情......如果是，有没有办法让我改变顺序，以便在控制器中设置了新方向后，ng级将被评估，并且$ state.go仅在之后执行其复制？

谢谢！

Answer 1

您没有包含setDirectionAndGoToState()函数的内容，但如果您只想控制操作的顺序，那么操作相当简单。请记住，Javascript是单线程的。 AngularJS的“摘要”机制运行在每个事件处理周期的最后，这就是你的ng-class表达式将被评估的地方。如果像$state.go(...)这样的事情对您而言执行得太早，只需将它们移动到“下一个打勾”。这是惯用的伎俩：

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

调用以这种方式将按照内部的代码，直到“下一个滴答”的执行超时 - 摘要周期运行之后。这将让这些类在转换到新状态之前得到应用。你可以明显地混合和匹配这种机制的使用（或者甚至嵌套它们）来精确控制排序。

请注意，虽然这对于偶尔发生的事件（如状态转换）来说很好，但确实会引入轻微的延迟 - 回调不会有零个毫秒。我不会推荐将它用于窗口大小事件处理程序之类的东西 - 这些情况还有其他技巧。