각도 지시문에서 이벤트 올림

Question

각도에서 지시문으로부터 이벤트를 발생 시키려면 어떻게해야합니까? 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; 
    }; 
}); 

자바 스크립트 :

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

자바 스크립트 :

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

       } 
      }; 
     } 
    }; 
});