Поднятие события из угловой директивы

Question

Как поднять событие из директивы в Angular? Я думаю о чем-то подобном ng-click.

Например, я пытаюсь создать, чтобы обернуть меню начальной загрузки в качестве директивы контекстного меню. Я хочу иметь событие, которое срабатывает при нажатии элемента. У меня это работает, установив событие click в контроллере как свойство области действия директивы и вызывающее это изнутри директивы. Правильно ли это?

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

Установить обработчик события как свойство по директиве. Я думал, что это может выглядеть скорее как ng-click, но это работает.

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

       } 
      }; 
     } 
    }; 
});