相关疑难解决方法(0)

我在追求什么

我想ngLoad在我的网页上为图像创建一个指令.这是我的首选标记:

<img ng-src="{{ src }}" ng-load="onLoad()">

是)我有的

的jsfiddle

现在,我有一个指定的imgLoad指令,如下所示:ngLoadscope

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

app.directive('imgLoad', [function() {
    return {
        restrict: 'A',
        scope: {
            loadHandler: '&ngLoad'
        },
        link: function (scope, element, attr) {
            element.on('load', scope.loadHandler);
        }
    };
}]);

生成的标记是:

<img ng-src="{{ src }}" img-load ng-load="onLoad()">

编辑:我之前认为指令的名称(即imgLoad)需要与我的属性名称(即ngLoad)不同.不是这种情况.解决方案是命名我的指令ngLoad.

需要改变什么

我想摆脱imgLoad属性.ngLoad无论其他任何属性,我都想工作.

我已经看到了什么

我的实施基于:

• angularjs指令在属性中指定的调用函数,并将参数传递给它
• AngularJS - 图像"onload"事件
• AngularJS:指令和$ compile文档的介绍

任何帮助深表感谢!

我需要以实际尺寸显示图像,即使它比容器大.我尝试了使用Image变量并在加载时捕获大小的技巧,如下所示:

HTML:

<div ng-controller="MyCtrl">
    <input ng-model="imageurl" type="url" />
    <button ng-click="loadimage()" type="button">Load Image</button>
    <img ng-src="{{image.path}}"
        style="width: {{image.width}}px; height: {{image.height}}px" />
</div>

使用Javascript:

.controller("MyCtrl", ["$scope", function ($scope) {
    $scope.image = {
        path: "",
        width: 0,
        height: 0
    }
    $scope.loadimage = function () {
        var img = new Image();
        img.onload = function () {
            $scope.image.width = img.width;
            $scope.image.height = img.height;
            $scope.image.path = $scope.imageurl;
        }
        img.src = $scope.imageurl;
    }
}]);

此脚本有效,但只有在图像很大的情况下多次单击按钮后才能使用.

我该怎么做才能让它一键完成？

有没有比这更好的方法来发现图像大小？