javascript - 如何为链接添加条件点击属性

Question

如果设置了特定变量，我正在尝试使 anchor 标记触发函数。在下面的示例中，name 设置为 "Shnick"，因此单击链接时应触发 func() 方法。但是，当我单击该链接时，什么也没有发生。

如果未设置name，那么我不希望出现click属性，因此func()方法将不会出现'执行。

我尝试查看有关在 Angular 中添加条件属性的这两个答案:

• How to add conditional attribute in Angular 2?

• What is the best way to conditionally apply attributes in AngularJS?

但这些都不起作用。这是我尝试使用上面提出的两个答案

尝试#1:

angular.module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.name = "Shnick";
    $scope.func = function() {
      alert("Link Clicked!");
    };
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-controller="myController">
  <p>Name: {{ name }} </p>
  <a href="#" [attr.click]="name ? func() : null">Click me</a>
</div>

尝试#2:

angular.module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.name = "Shnick";
    $scope.func = function() {
      alert("Link Clicked!");
    };
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-controller="myController">
  <p>Name: {{ name }} </p>
  <a href="#" ng-attr-click="name ? func() : undefined">Click me</a>
</div>

那么，如何有条件地添加 click 属性，以便仅在设置 name 时添加该属性并执行 func() 点击时的方法？

Answer 1

尽量不要用三元条件使事情变得过于复杂，在函数本身内部添加这个检查逻辑，这样的东西应该可以工作:

$scope.func = function() {
  if(!$scope.name) {
    return;
  }
  alert("Link Clicked!");
};