How to call a method defined in an AngularJS directive?

by

If you want to use isolated scopes you can pass a control object using bi-directional binding = of a variable from the controller scope. You can also control also several instances of the same directive on a page with the same control object.

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>

More Related Contents:

  1. angular ng-bind-html and directive within it
  2. How to use a keypress event in AngularJS?
  3. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  4. Link vs compile vs controller
  5. Angularjs dynamic ng-pattern validation
  6. What is the difference between ng-app and data-ng-app?
  7. Easiest way to pass an AngularJS scope variable from directive to controller?
  8. Using angularjs filter in input element
  9. Angularjs loading screen on ajax request
  10. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  11. Directive isolate scope with ng-repeat scope in AngularJS
  12. calling method of parent controller from a directive in AngularJS
  13. Enable angular-ui tooltip on custom events
  14. Accessing attributes from an AngularJS directive
  15. Custom form validation directive to compare two fields
  16. How to modify scope from within a directive in AngularJs
  17. Binding variables from Service/Factory to Controllers
  18. AngularJS custom form component / directive using ng-model
  19. How can you limit the value from input using AngularJS?
  20. How to set the dynamic controller for directives?
  21. Can you change templateUrl on the fly?
  22. Pass form to directive
  23. Enable/Disable Anchor Tags using AngularJS
  24. What is `priority` of ng-repeat directive can you change it?
  25. Illegal use of ngTransclude directive in the template
  26. What is ng-transclude?
  27. Understanding the transclude option of directive definition?
  28. How to detect browser using angularjs?
  29. angularjs text area character counter
  30. When to use double braces {{}} in angularJS

Leave a Comment