角UI的SREF的href决心完成回调 [英] Angular ui-sref href resolve completion callback

问题描述

所以我有一个链接列表，这是由解决了菜单的UI SREF

So I have a menu with a list of links which are resolved by ui-sref

<ul class="dropdown-menu" role="menu">
  <li data-ng-repeat="var in variables">
     <a ui-sref="user.method({myparam:var.id})">nicename</a>
  </li>
</ul>

问题是 - 这需要大约5秒钟解决，直到它被解决，由角提供的href是一个模板 - 如果被替换之前点击这会导致定位误差

The problem is - this takes around 5 seconds to resolve and until it is resolved, the href provided by angular is a template - which causes location error if clicked before it is replaced.

理想的解决方案是使用 NG-点击=$事件preventDefault（）;直到href是完全解决，并删除其在回调。

The ideal solution would be to use an ng-click="$event.preventDefault();" until href is fully resolved and remove it on a callback.

推荐答案

所以，我结束了一个指令，使用的解决方案

So I ended up with a directive-usage solution

CSS：

a.disabled {
    color: #cccccc;
    cursor: default;
    text-decoration: none;
}

HTML

<ul class="dropdown-menu" role="menu">
  <li data-ng-repeat="var in variables">
     <a class="lock-before-resolved disabled" ui-sref="user.method({myparam:var.id})">nicename</a>
  </li>
</ul>

JS

.directive('lockBeforeResolved', function() {
return {
    restrict: 'C', //check as a class
    link: function(scope, element, attrs, controller) {
        attrs.$observe('href',function(){
            element.toggleClass("disabled");
        });
        element.on("click", function(e) {
            if (element.hasClass("disabled")) {
                e.stopPropagation();;
                return false;
            }
        });
    },
}
})

最初，当 SREF 心不是尚未解决，链接保持无法点击。后决心事件，禁用类被删除，它允许点击一个链接。

Initially, when sref isnt yet resolved, the link stays unclickable. After resolve events, the class disabled is removed which allows clicking on a link.

希望它可以帮助别人

这篇关于角UI的SREF的href决心完成回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！