Question

我想写一个仅在整个页面中应用IMG标签的指令，最初我认为我必须使用自定义指令名称来装饰每个标签，例如：

<img my-img />。

但是，当我为这个问题整理一些示例代码时，我决定查看该指令是否与元素IMG本身相匹配。它有效！

这就是我所做的：http://plnkr.co/edit/z4n4a3MN89nRNYyXKCih?p=preview

app.directive('img', function () {
    return {
        restrict: 'E',
        link: function (scope, element) {
            element.bind('load', function () {
                element.addClass('fadeIn');
            });
            element.bind('error', function () {
                element.removeClass('fadeIn');
            });
        }
    };
});

正如您所看到的，我希望页面上的所有图像在加载时都会淡入。我想在不使用jQuery的情况下以有棱角的方式做到这一点，所以我认为这是一个很好的方法，但这是一个好的做法吗？在我的情况下，我真的希望这个逻辑适用于我页面上的所有图像（可能有数百个），所以我认为这将是一种干净的方式，但对于我的生活，我没有找到其他任何人都这样做的地方（即将指令与IMG标签或任何标准标签相匹配）。

Answer 1

我想我会避免使用img指令。请注意，Angular已经添加了自己的指令，这些指令与html元素名称相匹配（例如 - form，input，select，script），因此可以想象如果它们（或您使用的任何库）使用相同的链接，则可能存在冲突。指令名称。你真的想淡出所有图像吗？如果您在页面上使用图像作为装饰，该怎么办？

似乎最好添加属性。名义上的努力非常直观。如果您不关心内置属性，也可以创建自己的元素（例如）。

是否建议使用符合标准html标签的指令？

1 个答案: