AngularJS - 图片＆QUOT;的onload＆QUOT;事件 [英] AngularJS - Image "onload" event

问题描述

我一直在寻找的答案，简单却不平凡的问题：什么是抓形象的onload 在角只有jqLit​​e事件正确的方式？我发现<一个href=\"http://stackoverflow.com/questions/17018685/display-image-in-its-actual-size-in-angular-js\">this问题，但我希望有一些指令解决方案。

因此，正如我所说，这是不能接受的对我来说：

I've been searching for an answer to simple but not trivial question: What is a right way to catch image' onload event in Angular only with jqLite? I found this question , but i want some solution with directives.
So as i said , this is not accepted for me:

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

，因为它是在控制器，而不是在指令。

感谢，并有一个美好的一天。

because it is in controller , not in directive.
Thanks , and have a good day.

推荐答案

下面是在角度的内置事件处理指令的样式可重复使用的指令：

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

当IMG负载事件被触发的SB-负荷属性除权pression与负载事件沿着目前的范围进行评估，通过了作为$事件。以下是如何使用它：

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) {
        // ...
    }

注：SB仅仅是preFIX我用我的自定义指令

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

这篇关于AngularJS - 图片＆QUOT;的onload＆QUOT;事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！