Question

我不知道是否有办法在angularjs中处理这个问题，但我希望能够动态取消链接/链接指令。

例如，我有一个链接转到用户的个人资料页面：

<a ui-sref="users({user_id: post.user.id})">{{post.user.username}}</a>: {{post.text}}

正确创建链接：href =“/ users / 5” 但如果该帖子是匿名的，那么该帖子没有用户ID，创建链接：href =“/ users /”，这不是我想要的。

我能找到的唯一解决方案如下：

<span ng-if="post.user.id">
    <a ui-sref="users({user_id: post.user.id})">{{post.user.username}}</a>: {{post.text}}
</span>
<span ng-if="!post.user.id">
    <a href>{{post.user.username}}</a>: {{post.text}}
</span>

如果我没有在整个应用程序中放入所有这些废话，那就不会那么糟糕。有没有办法创建一个执行以下操作的简单指令：

<a ui-sref="({user_id: post.user.id})" unlink="{'ui-sref': !post.user.id}">post.user.username</a>: {{post.text}}

它会根据post.user.id的值链接/取消链接ui-sref吗？我可以尝试创建一个修改href的指令，但这将是一个与ui-sref冲突的混乱。此外，unlink指令更具可扩展性，因为我们可以有效地将它与任何指令一起使用。有什么想法吗？

Answer 1

这是一个掠夺者：http://plnkr.co/edit/dus2VixdzhUJtakOs4WR?p=preview

我做了一个指令，在ui-sref之前添加一个'click'事件监听器：

如果表达式评估为false，则调用stopImmediatePropagation。
由于this issue，我使用原生addEventListener。

<强>指令：

app.directive('unlink',function($parse){
  return {
    compile: function (tElm,tAttrs) {
      var fn = $parse(tAttrs.unlink);
      return {
        pre: function (scope,elm){
          elm[0].addEventListener('click', function(e){
            if(! fn(scope)) {
              e.stopImmediatePropagation();
            }
          });
        }
      }
    }
  }
});

<强> HTML：

<a ui-sref="home" unlink="expression"> Click </a>

如何在angularJS中动态取消链接指令？

1 个答案: