UI 路由器 - 状态转换延迟（非常慢）答案

【问题标题】：UI Router - State transition delay (very slow)UI 路由器 - 状态转换延迟（非常慢）
【发布时间】：2015-02-12 12:49:16
【问题描述】：

我在 Angular 应用程序中使用 ui-router，在绝大多数情况下它都没有问题。

$state.go("my-state") 不触发立即转换的情况很困难。有时它只是非常慢（几秒钟后转换到“我的状态”）有时它不会触发，直到我移动鼠标一段时间并触发一些事件处理程序（绝对与事件处理程序无关触发了过渡）。

这是我的指令中的内容：

// [...]
link: funtcion(scope, elm, attrs){
    elm.on('mouseenter', function(){
            // ...
        })
        .on('mousemove', function($event){
            // ...
        })
        .on('mouseleave', function(){
            // ...
        })
        .on('change', function(){
            // ...
        })
        .on('click', (e) ->

            if(someCondition){
                e.preventDefault()
                e.stopImmediatePropagation()
                e.stopPropagation()

                if(user.level == "visitor"){
                    $rootScope.$broadcast('showLogin')
                }
                else if(user.level == "member") 
                    $('#elementId').remove()
                    // PROBLEM HERE:
                    $state.go("my-state")
            }

            else if(anotherCondition){
                $('#elementId').remove()
            } 
        )
}
// [...]

我错过了什么吗？
我可以做些什么来“强制” ui-router 开始转换？

【问题讨论】：

$('#eementId')点击后是不是直接去掉了？
是的，但它不是指令附加到的元素，它是另一个元素

标签： javascript jquery angularjs angularjs-directive angular-ui-router

【解决方案1】：

那是因为 element 的 'on' 事件在 Angular 的摘要循环之外。像这样更新需要重定向的代码：

else if(user.level == "member") {
    scope.$apply(function() {
        $('#elementId').remove()
        // PROBLEM HERE: 
        $state.go("my-state")
    });
}

scope.$apply 专门用于需要手动调用 Angular 的摘要循环的情况。

还有一件事。如果出现错误提示“摘要循环已在进行中”，您可以将此技术与 $timeout 一起使用：

else if(user.level == "member") {
    $timeout(function() {
        $('#elementId').remove()
        // PROBLEM HERE: 
        $state.go("my-state")
    });
}

但请记住，以这种方式使用 $timeout 被认为是一种 hack，最好找到绕过它的方法，但它仍然被广泛使用。

P.S.不要忘记包含$timeout作为指令定义函数的依赖项。

附言阅读更多关于摘要循环 here 和 here

【讨论】：

您可以像$apply() 一样使用$applyAsync() 并避免摘要问题，因为该函数将在下一个tick 中执行（类似于0 的超时）。 Reference

【解决方案2】：

如果模板中有大型 ng-repeat 列表，则切换路由会出现一个有趣的问题。加载新视图可能会延迟。在我的情况下，它长达 7 秒！我发现的一个解决方案是在切换视图之前先删除列表中的 HTML 节点。这样 UI 路由器就不会卸载繁重的 HTML 页面。在这个例子中，clinicList 是一个长列表的父节点。

var clinicList = document.getElementById('clinicList');
if (clinicList) document.getElementById('clinicList').innerHTML = '';
$state.go('selectshiftlistview');

【讨论】：