Angular Directive의 링크 기능 내에서 ng-click vs bind 사용

Angular Directive의 링크 기능 내에서 ng-click vs bind 사용

---

링크 함수에서 함수를 클릭 이벤트에 바인딩하는 더 "각도"방법이 있습니까?

지금은 ...

myApp.directive('clickme', function() {   
  return function(scope, element, attrs) {
    scope.clickingCallback = function() {alert('clicked!')};
    element.bind('click', scope.clickingCallback);   
} });

이것이 Angular 방식입니까 아니면 추악한 해킹입니까? 아마도 나는 그렇게 걱정해서는 안되지만, 나는이 프레임 워크를 처음 접했고 특히 프레임 워크가 앞으로 나아갈 때 일을하는 "올바른"방법을 알고 싶습니다.

---

지시문에서 컨트롤러를 사용할 수 있습니다.

angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times',
       controller: function($scope, $element){
         $scope.clicked = 0;
         $scope.click = function(){
           $scope.clicked++
         }
       }
     }
   });

plunkr 데모

Angular 가이드의 지시문에 대한 추가 정보 . 그리고 저에게 매우 도움이되는 것은 공식 Angular 블로그 게시물 About those directives의 비디오였습니다 .

---

이런 식으로하는 사람이 많아서 괜찮은 것 같아요.

지시문 내에서 이벤트 처리기를 정의하는 경우에는 범위에서 정의 할 필요가 없습니다. 다음은 괜찮을 것입니다.

myApp.directive('clickme', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function() {
      alert('clicked!')
    };
    element.bind('click', clickingCallback);
  }
});

---

단순히 다음과 같아서는 안됩니다.

<button ng-click="clickingCallback()">Click me<button>

클릭 이벤트를 범위의 콜백에 매핑하기 위해 새 지시문을 작성하려는 이유는 무엇입니까? ng-click은 이미 그렇게합니다.

---

지시문에서 컨트롤러를 사용하고 제안 된 이전 응답과 같이 템플릿 html에서 ng-click을해야합니다. 단, 버튼 클릭 등 이벤트 (클릭)시 DOM 조작이 필요한 경우 버튼의 색상을 변경하고 싶은 경우에는 Link 기능을 사용하고 요소를 사용하여 dom을 조작합니다.

HTML 요소 또는 DOM이 아닌 조작 작업에 일부 값을 표시하는 것뿐이라면 지시문이 필요하지 않을 수 있으며 컨트롤러를 직접 사용할 수 있습니다.

---

In this case, no need for a directive. This does the job :

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

Source: https://docs.angularjs.org/api/ng/directive/ngClick

---

myApp.directive("clickme",function(){
    return function(scope,element,attrs){
        element.bind("mousedown",function(){
             <<call the Controller function>>
              scope.loadEditfrm(attrs.edtbtn); 
        });
    };
});

this will act as onclick events on the attribute clickme

참고URL : https://stackoverflow.com/questions/14823917/using-ng-click-vs-bind-within-link-function-of-angular-directive