javascript - AngularJS 指令 : put a call function in an attribute, 不包含另一个属性

Question

我在追求什么

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

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

我有什么

JSFiddle

现在，我有一个 imgLoad带有 ngLoad 的指令在 scope 中指定，像这样:

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 directive call function specified in attribute and pass an argument to it
• AngularJS - Image "onload" event
• AngularJS:introduction to directives和 $compile documentation

非常感谢任何帮助!

Answer 1

使用隔离作用域的简单解决方案

感谢@smk对于这个答案

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

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

HTML:

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

JSFiddle • AngularJS Guide to Isolate Scopes

虽然此解决方案在大多数情况下都很实用，但它会阻止您在同一元素上使用另一个具有隔离作用域的指令。这让我们……

使用 $parse 进行更多控制

使用$parse 自己处理属性。效果是一样的，不会和 isolate 作用域有任何冲突。

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(看起来和以前一样):

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

JSFiddle • AngularJS $parse Documentation

旁注:我没有使用 ngLoad 因为 Angular advises against it