web-dev-qa-db-fra.com

AngularJS - Événement "onload" de l'image

J'ai cherché une réponse à une question simple mais non triviale: Quelle est la bonne façon d'attraper l'image 'onload événement dans Angular uniquement avec jqLite? J'ai trouvé - cette question , mais je veux une solution avec des directives.
Donc, comme je l'ai dit, cela n'est pas accepté pour moi:

.controller("MyCtrl", function($scope){
    // ...
    img.onload = function () {
        // ...
    }

car il est dans le contrôleur, pas dans la directive.

javascriptangularjsangularjs-directiveonloadjqlite
29
Cherniv

Voici une directive réutilisable dans le style des directives de gestion d'événements intégrées d'angular:

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 });
          });
        });
      }
    };
  }]);

Lorsque l'événement img load est déclenché, l'expression dans l'attribut sb-load est évaluée dans la portée actuelle avec l'événement load, transmis en tant qu'événement $. Voici comment l'utiliser:

HTML 

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

JS 

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

Remarque: "sb" n'est que le préfixe que j'utilise pour mes directives personnalisées.

33
SamBarnes

Ok, jqLite ' bind méthode faisant bien son travail. Ça va comme ça:

Nous ajoutons le nom de la directive comme attribut dans notre balise img. Dans mon cas, après le chargement et en fonction de ses dimensions, l'image doit changer son nom de classe "horizontal" en "vertical", donc le nom de la directive sera "orientable":

<img ng-src="image_path.jpg" class="horizontal" orientable />

Et puis nous créons une directive simple comme celle-ci:

var app = angular.module('myApp',[]);

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});

Exemple (graphiques explicites!): http://jsfiddle.net/5nZYZ/63/

31
Cherniv

AngularJS V1.7. Ajout du ng-on-xxx directive:

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

AngularJS fournit des directives spécifiques pour de nombreux événements, tels que ngClick, donc dans la plupart des cas, il n'est pas nécessaire d'utiliser ngOn. Cependant, AngularJS ne prend pas en charge tous les événements et de nouveaux événements peuvent être introduits dans les normes DOM ultérieures.

Pour plus d'informations, consultez Référence de l'API de la directive AngularJS ng-on .

1
georgeawg

vous pouvez appeler la version javascript de l'événement onload dans angular js. cet événement ng-load peut être appliqué à n'importe quel élément dom comme div, span, body, iframe, img etc. ce qui suit est le lien vers ajoutez ng-load dans votre projet existant.

télécharger ng-load pour angular js

npm i angular-ng-load

Voici un exemple pour iframe, une fois qu'il est chargé testCallbackFunction sera appelé dans le contrôleur

[~ # ~] exemple [~ # ~]

JS

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });

HTML

  <div ng-app='myApp' ng-controller='myCtrl'> 
      <iframe src="test.html" ng-load callback="testCallbackFunction()">  
  </div>
1
Darshan Jain