ng-click으로 $ event를 자동으로 전달 하시겠습니까?

ng-click으로 $ event를 자동으로 전달 하시겠습니까?

---

다음 과 같이 개체를 ng-click전달하면 클릭 이벤트에 액세스 할 수있는 것을 알고 있습니다 $event.

<button ng-click="myFunction($event)">Give me the $event</button>

<script>
  function myFunction (event) {
    typeof event !== "undefined" // true
  }
</script>

$event매번 명시 적으로 전달 해야하는 약간의 성가신 일 입니다. ng-click기본적으로 접근 방법에 대한 접근 방법?

---

ng-click소스를 지시어 살펴보십시오 .

...
compile: function($element, attr) {
  var fn = $parse(attr[directiveName]);
  return function(scope, element, attr) {
    element.on(lowercase(name), function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  };
}

그것은 도시 : 방법 event오브젝트되고 전달 받는 ng-click사용 식 $event파라미터의 이름으로. 이는 $ parse 서비스에 의해 수행되는 연속 변수가 대상 범위 로 블리딩되는 것을 허용하지 않습니다. 즉 , 대답은 no 이며 $event다른 방법으로 프로그래밍에 액세스 할 수 있지만 사용 가능한 변수를 통해 액세스 할 수 있습니다 .

---

에 a $event를 추가합니다 ng-click. 예를 들면 다음과 같습니다.

<button type="button" ng-click="saveOffer($event)" accesskey="S"></button>

그런 다음 jQuery.Event경고에 전달되었습니다.

---

다른 사람들이 말했듯이 원하는 것을 엄격하게 수행 할 수 있습니다. 즉, 앵귤러 프레임 워크에서 사용할 수있는 모든 도구를 사용할 수도 있습니다! 이것이 의미하는 것은 실제로 자신의 요소를 작성 하고이 기능을 직접 제공 할 수있는 것입니다. 다음 plunkr ( http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1 ) 에서 볼 수있는 예제 로이 중 하나를 작성했습니다 .

이것의 핵심 부분은 "클릭 가능한"요소를 정의한다는 것입니다 (이전 IE 지원이 필요한 경우 작업을 수행하지 않습니다). 다음과 같은 코드에서 :

<clickable>
  <h1>Hello World!</h1>
</clickable>

그런 다음이 클릭 가능한 요소를 가져와 원하는 것으로 바꾸는 지시문을 정의했습니다 (클릭 이벤트를 자동으로 설정하는 요소).

app.directive('clickable', function() {
    return {
        transclude: true,
        restrict: 'E',
        template: '<div ng-transclude ng-click="handleClick($event)"></div>'
    };
});

마지막으로 컨트롤러에서 클릭 이벤트를 준비했습니다.

$scope.handleClick = function($event) {
    var i = 0;
};

이제 이것이 클릭 이벤트를 처리하는 메소드의 이름을 하드 코딩한다는 점을 언급 할 가치가 있습니다. 이를 제거하려면 클릭 핸들러의 이름과 "tada"를 지시문에 제공 할 수 있어야합니다. 사용할 수있는 요소 (또는 속성)가 있고 "$ event"를 다시 삽입 할 필요가 없습니다.

도움이 되었기를 바랍니다.

---

이 작업을 권장하지는 않지만 ngClick원하는 작업을 수행 하도록 지시문을 재정의 할 수 있습니다 . 그것은 말하는 것이 아닙니다.

원래 구현을 염두에두고 :

compile: function($element, attr) {
  var fn = $parse(attr[directiveName]);
  return function(scope, element, attr) {
    element.on(lowercase(name), function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  };
}

---

이를 재정의하기 위해 이렇게 할 수 있습니다.

// Go into your config block and inject $provide.
app.config(function ($provide) {

  // Decorate the ngClick directive.
  $provide.decorator('ngClickDirective', function ($delegate) {

    // Grab the actual directive from the returned $delegate array.
    var directive = $delegate[0];

    // Stow away the original compile function of the ngClick directive.
    var origCompile = directive.compile;

    // Overwrite the original compile function.
    directive.compile = function (el, attrs) {

      // Apply the original compile function. 
      origCompile.apply(this, arguments);

      // Return a new link function with our custom behaviour.
      return function (scope, el, attrs) {

        // Get the name of the passed in function. 
        var fn = attrs.ngClick;

        el.on('click', function (event) {
          scope.$apply(function () {

            // If no property on scope matches the passed in fn, return. 
            if (!scope[fn]) {
              return;
            }

            // Throw an error if we misused the new ngClick directive.
            if (typeof scope[fn] !== 'function') {
              throw new Error('Property ' + fn + ' is not a function on ' + scope);
            }

            // Call the passed in function with the event.
            scope[fn].call(null, event);

          });
        });          
      };
    };    

    return $delegate;
  });
});

그런 다음 다음과 같은 함수를 전달합니다.

<div ng-click="func"></div>

반대로 :

<div ng-click="func()"></div>

---

jsBin : http://jsbin.com/piwafeke/3/edit

내가 말했듯이,을 구석으로 나는 없는 이 일을 권장하지만, 그것은 당신에게 그것을 보여주는 개념의 증거, 예 - 당신은 실제로 덮어 쓰기에 / 당신의 요구에 맞게 / 오그 내장 각 동작을 확장 할 수 있습니다 . 원래 구현에 깊이 파고 들지 않습니다.

이 길을 가기로 결정 조심해서 사용하십시오 (하지만 많은 재미).

참고 URL : https://stackoverflow.com/questions/21101492/automatically-pass-event-with-ng-click