ng-click не работает в моей директиве


У меня здесь очень простой сценарий.

<body>
<h1 nametag name="name" logsomthing="logsomthing()">Hello {{name}} <a href="#" ng-click="logsomthing()">Click here for alert</a></h1>
</body>

Js

angular.module('test', [])
.directive('nametag', function() {

return {
    scope: {
      name: '=',
      logsomthing: '&'
    },
    controller: function($scope, $attrs, $log) {
      $scope.name = 'John Doe';

      $scope.logsomthing = function() {
        alert('it is working');
      }
    },
    link: function(scope, elem, attrs) {

    }
  };
});

Он должен предупреждать ("это работает") по щелчку, но ничего не происходит. Я не могу найти решение.

Вот http://plnkr.co/edit/QbcVynqzkIniYEpMD9mX?p=preview

1 2

1 ответ:

Если вы хотите, чтобы он работал, вам нужно поместить шаблон в вашу директиву:

Http://plnkr.co/edit/QXnDqDwQuyGhKpHZoCvy?p=preview

Директива:

angular.module('test', [])
.directive('nametag', function() {

 return {
  scope: {
    name: '@',
  },
  template:'Hello {{name}} <a href="#" ng-click="logsomthing()">Click here for alert</a>',
  controller: function($scope, $attrs, $log) {
      //$scope.name = 'John Doe';    // Not necessary anymore, sent by the view

      $scope.logsomthing = function() {
        alert('it is working');
      }
    },
    link: function(scope, elem, attrs) {

    }
};

});

Вид:

<body>
  <h1 nametag name="John Doe"></h1>
</body>

И Вам также не нужно определять 3 раза, когда вы выполняете функцию logsomthing