ディレクティブでトランスクルードされた子要素でクリック イベントを発生させようとしています。機能していません。何らかの理由で親スコープへのアクセスを失ったようです。
app.controller('myController', [
'$scope',
'$log',
'$q',
function ($scope, $log) {
$scope.delete = function(){
$log.log('delete clicked');
};
$scope.whatever = function(){
$log.log('whatever clicked');
};
}
]);
<!-- directive markup -->
<span class="ui-menu-action">
<span class="trigger" ng-click="showMenu = !showMenu">
<i class="sl-icon sl-icon-box-arrow-down"></i>
</span>
<div class="actions" ng-show="showMenu" ng-mouseenter="cancelHide()"></div>
</span>
<!-- calling the directive -->
<ui-menu-action>
<ul>
<li><a href ng-click="delete()">Delete</a></li>
<li><a href ng-click="whatever()">Whatever</a></li>
</ul>
</ui-menu-action>
app.directive('UiMenuAction', [
'$http',
'$tooltip',
'$log',
'$rootScope',
'$timeout', function($http, $tooltip, $log, $rootScope, $timeout){
return {
restrict: 'E',
replace: true,
//scope: {},
transclude: true,
templateUrl: './scripts/modules/ui/templates/ui.menu.action.html',
link: function(scope, element, attrs, ctrl, transclude){
var to;
scope.showMenu = false;
scope.hideOnPageClick = attrs.hideonpageclick;
$rootScope.$on('pageClick', function(e, $event){
var isMenuClick = !!$($event.target).parents('.ui-menu-action').length;
if ( scope.hideOnPageClick && !isMenuClick ) {
scope.showMenu = false;
}
});
scope.hideMenu = function(){
if ( scope.hideOnPageClick ) return;
to = $timeout(function(){
scope.showMenu = false;
}, 400);
};
scope.cancelHide = function(){
if ( scope.hideOnPageClick ) return;
if ( to ) {
$timeout.cancel(to);
}
};
transclude(scope.$parent, function(clone, scope) {
element.find('.actions').append(clone);
});
}
};
}]);