Question

我在角度应用程序中使用ui-router，对于绝大多数情况，它没有问题。

如果$state.go("my-state")没有触发即时转换，则会遇到困难。有时它只是非常慢（过渡到＆＃34;我的状态＆＃34;几秒钟后）有时它不会触发，直到我移动鼠标一段时间然后我发射一些事件处理程序（绝对与触发转换的事件处理程序无关。）

这就是我在指令中所拥有的：

// [...]
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()
            } 
        )
}
// [...]

我错过了什么吗？我能做些什么来强迫＆＃34;强迫＆＃34; ui-router开始过渡？

Answer 1

那是因为element的{{1}}事件超出了角度的摘要循环。更新需要重定向的代码，如下所示：

'on'

else if(user.level == "member") { scope.$apply(function() { $('#elementId').remove() // PROBLEM HERE: $state.go("my-state") }); }专门用于需要手动调用角度的摘要周期的情况。

还有一件事。如果发生错误，说“摘要循环已在进行中”，您可以将此技术用于scope.$apply：

$timeout

但请记住，以这种方式使用else if(user.level == "member") { $timeout(function() { $('#elementId').remove() // PROBLEM HERE: $state.go("my-state") }); }被认为是一种黑客行为，并且可能更好地找到解决方法，但它仍然被广泛使用。

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

P.P.S。详细了解摘要循环here和here

Answer 2

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

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

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

2 个答案: