在AngularJS中使超链接的行为成为条件

aza*_*gru 7 hyperlink angularjs angularjs-ng-click

在Angular应用程序中,我有一个需要具有以下行为的超链接列表:

  • 如果存在某种条件(例如,如果某个cookie的值为x),则单击超链接应该打开一个模态窗口;

  • 如果不满足此条件(例如,如果cookie具有值y),则超链接应以其通常的方式操作并在新选项卡中打开链接.

超链接的格式如下:

<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
  {{article.title}}
</a>
Run Code Online (Sandbox Code Playgroud)

我对如何实现这样的行为感到困惑.如果我离开都ng-hrefngclick指令,然后ng-href将插入网址和每次点击都会在新标签中打开一个页面.如果我删除该ng-href指令,那么在另一个选项卡中打开链接的唯一方法是通过javascript,但大多数浏览器都会阻止这种情况.我想不出ng-href有条件的方法(例如,写作<a ng-href="myCondition === true ? {{article.url}} : '#'">不起作用).

能否请您介绍一下如何在Angular中实现这样的功能?

Sag*_*age 11

这对我有用

<a ng-href='{{(element.url.indexOf("#")>-1) ? element.url : element.url + "client_id="}}{{credible.current_client_info.client_id}}'>{{element.title}}</a>
Run Code Online (Sandbox Code Playgroud)


aza*_*gru 1

这是我想出的。它看起来有点丑,所以如果您有更好的建议,非常欢迎:

我编写了两个具有不同行为的独立锚标记,并让 Angular 根据是否满足必要条件在它们之间进行选择:

      <a href="#" ng-if="checkCookies() === 'show popup'" ng-click="openArticle(article)">
        {{$parent.article.title}}
      </a>

      <a ng-href="{{$parent.article.url}}" target="_blank" ng-if="checkCookies() === 'no popup'">
        {{$parent.article.title}}
      </a>
Run Code Online (Sandbox Code Playgroud)

在 javascript 文件中,我编写了checkCookies()查找特定 cookie 值的函数。