이벤트 핸들러

Question

내가 지시가 작동하는 방법을 조금 더 이해하려고, 그래서 나는이 간단한 지침 작성 :

Avraam.directive('whoami',function(){ 
    return{ 
     restrict:'A', 
     template:"<label id='avraam'>Avraam</label>", 
     link:function(scope, element, attrs) { 
      var avraam = $(element).find('#avraam'); 
      $(avraam).hide(); 

     } 
    } 
}); 

사람들은 DOM 조작은 지시어 내부에서 수행해야한다는 지원을, 그래서 내가 원하는 지시문 안에 ng-click 이벤트 처리기를 만들려면 어떻게해야합니까? 사용자가 요소를 클릭하면 요소가 숨겨집니다.

Answer 1

을 필요로하는 모든 요소를 ​​숨길 경우,이 ngClick 및 템플릿에 ngHide ...

을 통해 달성 될 수있다 당신이 다른 일을하기 위해 클릭 핸들러가 필요한 경우

Avraam.directive('whoami',function(){ 
    return{ 
     restrict:'A', 
     scope: {}, 
     template:"<label ng-click='hidden = true' ng-hide='hidden' id='avraam'>Avraam</label>" 
    } 
}); 

JSFiddle

, 당신은 ...

범위의 메소드를 호출하는 템플릿에 ngClick을 사용할 수 있습니다3210

Avraam.directive('whoami',function(){ 
    return{ 
     restrict:'A', 
     template:"<label ng-click='doSomething()' id='avraam'>Avraam</label>", 
     controller: function ($scope, $element) { 
      $scope.doSomething = function() { 
       // do work with $element here 
       alert($element.text()); 
      }; 
     } 
    } 
}); 

JSFiddle

그리고 여기가

가

Avraam.directive('whoami',function(){ 
    return{ 
     restrict:'A', 
     template:"<label id='avraam'>Avraam</label>", 
     link: function (scope, element) { 
      element.on("click", function() { 
       alert(element.text()); 
      }); 
     } 
    } 
}); 

Answer 2

ng-click은 지시어입니다. 지시문에 클릭 핸들러를 추가하려는 것 같습니다. 이렇게하려면 당신은 단순히 링크 방법에있는 당신의 요소에 처리기를 추가합니다 :

Avraam.directive('whoami',function(){ 
    return{ 
     restrict:'A', 
     template:"<label id='avraam'>Avraam</label>", 
     link:function(scope, element, attrs) { 
      element.bind("click", function(){ 
       $(this).hide(); 
      }); 
     } 
    } 
});