click event in angular on transcluded children

Question

I'm trying to fire a click event on a transcluded child element in my directive. It isn't working. I seem to have lost access to parent scope for some reason.

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

score 0 · Answer 1 · answered Feb 03 '15 at 00:19

0

why dont you just remove

      transclude(scope.$parent, function(clone, scope) {
        element.find('.actions').append(clone);
      });

And add ng-transclude to your markup

<div class="actions" ng-transclude ng-show="showMenu" ng-mouseenter="cancelHide()"></div>

answered Feb 03 '15 at 00:19

yangli-io

16,760
8
37
47

I did that although better I still have the same problem. Events in the transcluded markup do not bubble up to the parent scope the directive was called in. – chovy Feb 03 '15 at 00:35
What do you mean "Events in the transcluded markup do not bubble up to the parent scope the directive was called in" AFAIK, this only occurs when you have an isolated scope and in your directive, you've commented out the scope. – yangli-io Feb 03 '15 at 00:44

click event in angular on transcluded children

1 Answers1