AngularJS指令：在一个属性中放置一个调用函数，不包含另一个属性

What I'm after

I would like to create a ngLoad directive for images on my webpage. This is my preferred markup:

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

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

What I have

JSFiddle

的jsfiddle

Right now, I have a imgLoad directive with ngLoad specified in the scope, like so:

现在，我有一个imgLoad指令，在范围内指定了ngLoad，如下所示：

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

The resulting markup is:

生成的标记是：

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

Edit: I previously assumed that the name of the directive (i.e. imgLoad) needed to be different from the name of my attribute (i.e. ngLoad). This is not the case. The solution is to name my directive ngLoad.

编辑：我以前认为指令的名称（即imgLoad）需要与我的属性名称（即ngLoad）不同。不是这种情况。解决方案是命名我的指令ngLoad。

What needs to change

I want to get rid of the imgLoad attribute. I want ngLoad to work regardless of any other attributes.

我想摆脱imgLoad属性。我希望ngLoad能够工作而不管其他任何属性。

What I've already seen

My implementation is based on:

我的实施基于：

• angularjs directive call function specified in attribute and pass an argument to it
• angularjs指令调用在属性中指定的函数并将参数传递给它
• AngularJS - Image "onload" event
• AngularJS - 图像“onload”事件
• AngularJS: introduction to directives and $compile documentation
• AngularJS：指令和$ compile文档的介绍

Any help is much appreciated!

任何帮助深表感谢！

1 个解决方案

#1

Simple Solution Using Isolate Scope

Thanks to @smk for this answer

感谢@smk的回答

Give the directive and the scope property the same name.

为指令和scope属性指定相同的名称。

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

HTML:

HTML：

<img img-load="onLoad()">

JSFiddle • AngularJS Guide to Isolate Scopes

JSFiddle•AngularJS隔离范围指南

While this solution is practical for most situations, it prevents you from using another directive with an isolate scope on the same element. Which brings us to…

虽然此解决方案适用于大多数情况，但它会阻止您在同一元素上使用具有隔离范围的另一个指令。这让我们...

More Control Using $parse

Use $parse to process the attributes yourself. The effect will be the same, and there won't be any conflicts with isolate scopes.

使用$ parse自己处理属性。效果将是相同的，并且不会与隔离范围发生任何冲突。

app.directive('imgLoad', ['$parse', function($parse) { // Inject $parse
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var loadHandler = $parse(attr.imgLoad); /* Parse value of
                                                       'imgLoad' attribute */
            element.on('load', function() {
                loadHandler(scope); /* Run the function returned by $parse.
                                       It needs the scope object
                                       to operate properly. */
            });
        }
    };
}]);

HTML (looks the same as before):

HTML（看起来和以前一样）：

<img img-load="onLoad()">

JSFiddle • AngularJS $parse Documentation

JSFiddle•AngularJS $解析文档

Side Note: I didn't use ngLoad because Angular advises against it

旁注：我没有使用ngLoad，因为Angular建议反对它