Call function of a specific directive instance from a controller

Question

I am having trouble understanding how to call a function on a specific instance of a directive if it meets certain criteria. In the example below, I would like to call a the function on a specific directive instance when a keyboard shortcut is pressed if it has the class focused based on ng-class. Your help is much appreciated!

http://plnkr.co/edit/P7rM3o4TADSf6rxTIRsZ?p=preview

index.html

<body ng-controller="SampleController">
   <test-question
      ng-repeat="n in [1,2,3]"
      ng-class="{'focused': tracer.focus == n}"
      focusnum = "{{n}}"
      ng-click="tracer.focus = n"
      >
      Test Question {{n}}
    </test-question>
</body>

script.js

angular.module('sampleApp', [])
  .controller("SampleController", function($scope) {
    $scope.tracer = {
        focus: 1
    }
    // on keyboard shortcut call some function on a specific directive with class focused
  })
  .directive('testQuestion', function() {
    return {
        restrict: 'E',
        link: function(scope, el, attrs) {
          scope.someFunction = function() {};
        }
    }
  });

score 0 · Answer 1 · answered Jan 06 '15 at 04:33

Change your script.JS to something like below:

// Code goes here

angular.module('sampleApp', [])
  .controller("SampleController", function($scope) {
    $scope.tracer = {
        focus: 1
    }
    // on keypress call directive function that has class focused
  })
  .directive('testQuestion', ['$document',
    function($document) {
      return onUserKeyPress;
    }
  ]);

  var onUserKeyPress = function(scope, element, attributes) {
    element.on('click', onClick);
  }

  var onClick = function(event) {
    alert('clicked');
  }

Thank you,

Sorry I was unclear. I would like to call a function on a specific directive instance when a keyboard shortcut is pressed if it has the class focused based on ng-class — Derrick Mar, Jan 06 '15 at 04:51

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

I guess the key point here is - you want to attach keyboard events to static html! For that you need to add tabindex.

Changes in html

<test-question ng-enter="doWhatever()" tabindex="0"
      ng-repeat="n in [1,2,3]"
      ng-class="{'focused': tracer.focus == n}"
      focusnum = "{{n}}"
      ng-click="tracer.focus = n"
      >
      Test Question {{n}}
    </test-question>

Changes in script

.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                  console.log("In your directive....")
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});;

refer :http://plnkr.co/edit/vho0BPfGPW2zE5OYHkgP?p=preview

for explanation follow How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

edited May 23 '17 at 12:28

Community

1
1

answered Jan 06 '15 at 04:46

Yogesh Manware

1,843
1
22
25

Sorry I was unclear. I would like to call a function on a specific directive instance when a keyboard shortcut is pressed if it has the class focused based on ng-class – Derrick Mar Jan 06 '15 at 04:50
Hey Yogesh. This still calls all the directives it appears. That's why it logs the statement three times. Not sure if the `$scope.$watch(attrs.ngClass, function (value) {` is really doing anything in this case? – Derrick Mar Jan 08 '15 at 03:31
ok now I modified my answer once again! You can combine ng-enter and focus event as per your requirement. – Yogesh Manware Jan 09 '15 at 07:52

Call function of a specific directive instance from a controller

2 Answers2