Как добавить атрибут условного клика в ссылку

Question

Я пытаюсь заставить тег привязки вызывать функцию, если установлена ​​конкретная переменная. В приведенном ниже примере name установлен на "Shnick", поэтому при нажатии на ссылку должен запускаться метод func(). Однако ничего не происходит, когда я нажимаю на ссылку.

Если name не установлен, то я не хочу, чтобы атрибут click появлялся, и поэтому метод func() не будет выполняться.

Я пытался посмотреть на эти два ответа на добавление условных атрибутов в Angular:

• Как добавить условный атрибут в Angular 2?

• Каков наилучший способ условного применения атрибутов в 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!");
};

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 = '');
})