有条件地改变Angular中按钮中的链接

Conditionally Alter link in button in Angular

本文关键字：按钮 链接 Angular 改变 有条件      更新时间：2023-09-26

我正试图找到一种简单的方法来交换angular js中按钮中的链接，我在可以使用的范围内有可用的属性，但我不知道如何实现。我试图更改的链接在按钮的"onClick"属性中。再次提前感谢，这是我的代码：

<div class="instructions-button">
      <button
      type="button"
      class="halo-modal-action-button external-instructions"
      onClick="window.open('https://mysite/foo');"
      window="new"
      ng-disabled=""
      ng-click=""
      data-bs-enabled=""
      >Instructions</button>
    </div>

我正在尝试制作一个简单的条件来显示任一项：

'mysite/foo || mysite/bar'

但我不确定如何让它发挥作用。

不要在按钮上使用onClick事件，尽管这可能会让你感到奇怪，因为你来自香草JS，所以应该使用ng-click。

<button
      class="halo-modal-action-button external-instructions"
      ng-disabled=""
      ng-click="openWindow()"
      data-bs-enabled=""
      >Instructions</button>

和内部控制器

$scope.openWindow = function(){
    if ( condition ) {
        open('http:foo.bar')
    } else {
        open('http:bar.foo')
    }
}

两种简单的方法。

1） 两个按钮，并用ng-show有条件地显示一个。

<button ... ng-show="conditionShowFooTrue" >
<button ... ng-show="conditionShowBarTrue" >

2） 使用ng-click调用作用域函数，按照其他答案的建议有条件地设置url。

如果你使用路由，你可以像@Akxe所说的那样使用ng-click，并且在你的控制器中使用$location服务，执行：

$scope.changeLocation = function(){
  if(condition)
  {
    $location.path('/foo');
  } else
  {
    $location.path('/bar');
  }
};

我认为这将是Angular的方法。

相关文章：