Рекомендуется или рекомендуется использовать директиву, соответствующую стандартным тегам html?

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), поэтому представляется возможным, что потенциально может быть конфликт, если они (или любая используемая вами библиотека) используют тот же название директивы. И вы действительно хотите исчезнуть во всех изображениях? Что делать, если вы используете изображение как украшение на странице?

Кажется, было бы лучше вместо этого добавить атрибут. Это очень интуитивно понятно с номинальным усилием. Если вам не нужны встроенные атрибуты, вы также можете создать свой собственный элемент (например,).