Question

如果要设置一个特定的变量，我试图使锚标签触发一个函数。在下面的示例中，name设置为"Shnick"，因此单击链接时应触发func()方法。但是，当我单击链接时，没有任何反应。

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

我尝试着在Angular中添加条件属性时查看以下两个答案：

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

尝试＃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!");
};

Answer 2

HTML代码：

<a ng-href='{{link}}' ng-click='test(type);'> your link </a>

js代码：

$scope.name = "";
$scope.$watch('m', function(value){
    ($scope.name = "Shnick") ? ($scope.link = 'actual_link') : ($scope.link = '');
})

如何添加条件点击属性以链接

2 个答案: