Angular: ng-click in a directive - Revised

ng-click doesn't work within a directive - Revised

by John Piesco

HTML

<div ng-controller="FormCtrl">
  <questions on-edit="editQuestion(ev,question)" ></questions>
</div>

JavaScript

var app = angular.module('myApp', []);

function FormCtrl ($scope) {
    $scope.editQuestion = function (ev,question) {
        //ev returns a MouseEvent object
        alert("ev: " + ev);
        //this is how you get the 'data' attribute set in the span tag below
        alert("ev-data: " + ev.target.attributes.data.value); 
    };
}
app.directive('questions', function($compile) {
  var tpl = 
    '     <span ng-click="onEdit({ev: $event, myName: question})" data="Probably a mustache brace parameter here returning a value from the scope." style="cursor:pointer;">Click Me</span>';
  return {
    restrict: 'E',
    terminal: true,
      scope: { onEdit: '&' },
    template: tpl,
    link: function(scope, element, attrs) {
        $compile(element.contents())(scope.$new());
    }
  };
});