Angular ui-sref href resolve completion callback

Angular ui-sref href resolve completion callback

本文关键字：completion callback resolve href ui-sref Angular      更新时间：2023-09-26

所以我有一个菜单，其中包含由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 秒才能解决，在解决之前，angular 提供的 href 是一个模板 - 如果在替换之前单击它会导致位置错误。

理想的解决方案是使用 ng-click="$event.preventDefault();" 直到 href 完全解析并在回调时将其删除。

所以我最终得到了一个指令使用解决方案

.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尚未解析时，链接将保持不可单击状态。解决事件后，将删除禁用的类，从而允许单击链接。

希望它对某人有所帮助

相关文章：