Raising an event from an angular directive

Question

How do I raise an event from a directive in Angular? I'm thinking of something similar to ng-click.

For example I'm trying to create to wrap the bootstrap menu as a context menu directive. I want to have an event that fires when an item is clicked. I have it working by setting the click event in the controller as a scope property of the directive and calling that from inside the directive. Is this the 'correct' way to go about it?

jsFiddle here

HTML:

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        Item Clicked: {{item}}

        <ul context-menu class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" context-click="onClick">
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Action')">Action</a></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Another action')">Another action</a></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Something else')">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Separated link')">Separated link</a></li>
        </ul>
    </div>
</div>

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

Javascript:

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

app.directive("contextMenu", function () {
    return {
        restrict: 'A',
        scope: {
            contextClick: '='
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.contextMenuClick = function (item) {
                        scope.contextClick.call(scope.$parent, item);
                    };

                    // Show the menu
                    iElement.css({
                        display: 'block',
                        top: '100px'
                    });

                }
            };
        }
    };
});

Answer 1

Set the event handler as a property on the directive. I thought it might look more like ng-click but this works.

jsFiddle here

HTML:

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        Item Clicked: {{item}}

        <ul context-menu class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" context-click="onClick">
          <li><a tabindex="-1" href="#")">Action</a></li>
          <li><a tabindex="-1" href="#")">Another action</a></li>
          <li><a tabindex="-1" href="#")">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#")">Separated link</a></li>
        </ul>
    </div>
</div>

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

Javascript:

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

app.directive("contextMenu", function () {
    return {
        restrict: 'A',
        scope: {
            contextClick: '='
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.contextMenuClick = function (item) {
                        scope.contextClick.call(scope.$parent, item);
                    };

                    // Show the menu
                    iElement.css({
                        display: 'block',
                        top: '100px'
                    });

                }
            };
        }
    };
});