AngularJS – Image “onload” event

by

Here’s a re-usable directive in the style of angular’s inbuilt event handling directives:

angular.module('sbLoad', [])

  .directive('sbLoad', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {
        var fn = $parse(attrs.sbLoad);
        elem.on('load', function (event) {
          scope.$apply(function() {
            fn(scope, { $event: event });
          });
        });
      }
    };
  }]);

When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here’s how to use it:

HTML

<div ng-controller="MyCtrl">
  <img sb-load="onImgLoad($event)">
</div>

JS

  .controller("MyCtrl", function($scope){
    // ...
    $scope.onImgLoad = function (event) {
        // ...
    }

Note: “sb” is just the prefix I use for my custom directives.

More Related Contents:

  1. Controller not a function, got undefined, while defining controllers globally
  2. Add directives from directive in AngularJS
  3. How to set an iframe src attribute from a variable in AngularJS
  4. Why is `replace` property deprecated in AngularJS directives? [duplicate]
  5. How to run function in AngularJS controller on document ready?
  6. How to set bootstrap navbar active class with Angular JS?
  7. How to require a controller in an angularjs directive
  8. AngularJS communication between directives
  9. How to make a directive update ng-model on jquery on event?
  10. Dynamic NG-Controller Name
  11. Removing # from url in Angularjs while having .run in routes
  12. What’s the difference/incompatibility between ng-model and ng-value?
  13. Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?
  14. Showing alert in angularjs when user leaves a page
  15. Resetting form after submit in Angularjs
  16. Dynamic form name attribute in Angularjs
  17. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  18. $watch’ing for data changes in an Angular directive
  19. Detect unsaved changes and alert user using angularjs
  20. angular directive ignore non-numeric input
  21. How can I listen for a click-and-hold in AngularJS?
  22. Extending AngularJs Directive
  23. ng-selected not working in select element
  24. Stating directive templateUrl relative to root
  25. Confirmation dialog on ng-click – AngularJS
  26. How to Unit Test Isolated Scope Directive in AngularJS
  27. Directive is being rendered before promise is resolved
  28. Add ng-click dynamically in directive link function
  29. How to create a custom input type?
  30. Sort or Rearrange Rows of a table in angularjs (drag and drop)

Leave a Comment