AngularJS-événement "onload"
j'ai cherché une réponse à une question simple mais non triviale: Quelle est une bonne façon d'attraper l'image' onload événement en angle seulement avec jqLite? J'ai trouvé cette question , mais je veux une solution avec des directives.
Donc comme je l'ai dit, ceci n'est pas accepté pour moi:
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
parce qu'il est dans le contrôleur, pas dans la directive.
2 réponses
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 de l'attribut SB load est évaluée dans le champ d'application courant avec l'événement load, passé en $event. Voici comment l'utiliser:
HTML
<div ng-controller="MyCtrl">
<img sb-load="onImgLoad($event)">
</div>
JS
.controller("MyCtrl", function($scope){
// ...
$scope.onImgLoad = function (event) {
// ...
}
Note:" sb " est juste le préfixe que j'utilise pour mes directives personnalisées.
Ok, jqLite' bind méthode bien faire son travail. Il va comme ceci:
nous ajoutons le nom de la directive comme attribut dans notre étiquette img . Dans mon cas , après chargement et en fonction de ses dimensions, image doit changer son nom de classe de "horizontal" à "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 ceci:
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 /