ng클릭으로 $이벤트를 자동으로 전달하시겠습니까?

ng클릭으로 $이벤트를 자동으로 전달하시겠습니까?

클릭 이벤트에 액세스 할 수 있는 것은, 다음과 같습니다.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 서비스에 의해 수행됩니다.이 서비스는 파라미터가 타깃 범위로 블리딩되는 것을 허용하지 않습니다.즉, "아니오"는 응답이며,$event콜백 파라미터를 경유하는 것 이외에는 오브젝트를 사용할 수 없습니다.

를 추가합니다.$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