CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Mark
Mark

Reputation: 5088

Pass event object from directive to callback

Im using Angular 1.5.6.

I have a directive for checking for a double click:

angular.module('redMatter.analyse')
.directive('iosDblclick',
  function () {

      var DblClickInterval = 300; //milliseconds

      var firstClickTime;
      var waitingSecondClick = false;

      return {
          restrict: 'A',

          link: function (scope, element, attrs) {
              element.bind('click', function (e) {

                  if (!waitingSecondClick) {
                      firstClickTime = (new Date()).getTime();
                      waitingSecondClick = true;

                      setTimeout(function () {
                          waitingSecondClick = false;
                      }, DblClickInterval);
                  }
                  else {
                      waitingSecondClick = false;

                      var time = (new Date()).getTime();
                      if (time - firstClickTime < DblClickInterval) {

                          scope.$apply(attrs.iosDblclick);

                      }
                  }
              });
          }
      };
  });

I use this here:

<div ios-dblclick="onDoubleClick($event, graph)" ></div>

graph is an object inside an ng-repeat directive. In onDoubleClick, I need access to $event:

$scope.onDoubleClick = function($event, graph){

    console.log('in onDoubleClick and arguments are ', arguments);

    var element = $event.srcElement;

However I'm unsure of how to pass the event from the directive to onDoubleClick. In the console log, arguments prints out as:

[undefined, Object]

Where Object is graph. How can I also pass back the event?

Upvotes: 5

Views: 1729

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

Since you could pass locals with $eval method, consider using it while calling attrs.iosDblclick. Internally it uses $parse API to evaluate method and uses local as a parameter.

scope.$eval(attrs.iosDblclick, {$event: e});

Plunker Demo

See also

Upvotes: 2

Andrew Koval
Andrew Koval

Reputation: 166

UPDATED

http://jsfiddle.net/ADukg/14470/ - working example.

So, you could pass the function to directive like this:

<div ios-dblclick="onDoubleClick" ios-dblclick-arg="graf" ></div>

inside your directive:

      return {
      restrict: 'A',
      scope: {
        myCallback: '=iosDblclick',
        graph: '=iosDblclickArg'
      },
      link: function (scope, element, attrs) {
          element.bind('click', function (e) {

              if (!waitingSecondClick) {
                  firstClickTime = (new Date()).getTime();
                  waitingSecondClick = true;

                  setTimeout(function () {
                      waitingSecondClick = false;
                  }, DblClickInterval);
              }
              else {
                  waitingSecondClick = false;

                  var time = (new Date()).getTime();
                  if (time - firstClickTime < DblClickInterval) {
                      scope.myCallback(e, scope.graph)

                  }
              }
          });
      }
  }

Upvotes: 2

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

You can pass callback to directive as: onDoubleClick: '&' - isolate scope

webApp.directive('iosDblclick',
  function () {

      var DblClickInterval = 300; //milliseconds

      var firstClickTime;
      var waitingSecondClick = false;

      return {
          restrict: 'A',
          scope: {
            onDoubleClick: '&'
        },

          link: function (scope, element, attrs) {
              element.bind('click', function (e) {

                  if (!waitingSecondClick) {
                      firstClickTime = (new Date()).getTime();
                      waitingSecondClick = true;

                      setTimeout(function () {
                          waitingSecondClick = false;
                      }, DblClickInterval);
                  }
                  else {
                      waitingSecondClick = false;

                      var time = (new Date()).getTime();
                      if (time - firstClickTime < DblClickInterval) {
                          scope.onDoubleClick({data: {e:e, val: "someValue"}});
                      }
                  }
              });
          }
      };
  });

Where HTML is:

<div ios-dblclick  on-double-click="onDoubleClick(data)" ></div>

And controller:

$scope.onDoubleClick = function(data){
    var element = data.e.srcElement;
}

Plunker Demo

Upvotes: 0

Related Questions