Angularjs - custom directive with the same name of standard html elements

Question

What happens if I create a directive that has the same name of standard html attributes or elements? For example if I define:

.directive('link', function(){
  return {
    restrict: 'A',
    link: function(scope, elements, attributes){
      // do something
   }
})

used like this

<a link="http://www.foo.com" ng-href="www.google.com">Conditional Link </a>

would it conflict with the standard <link rel="stylesheet" type="text/css" href="theme.css"> element?

Maybe in this case it would not because I've restricted the directive to attributes only, but my question is more general.

For example what if I named my directive href?
Will the directives always have the precedence over the standard html element or attributes?

it should work as you will command it to; this is directive's purpose after all. — noypi
– noypi, Commented Oct 14, 2014 at 9:21

Chandermani · Accepted Answer · 2014-10-14 09:13:52Z

3

Directives can attach behavior to existing html element. If you create directive href, i believe there should be no issue, unless your directive removes itself (or href). There is no concept of precedence unless multiple directives are defined or applied on same element.

Remember you cannot change the behavior of browser, if browser sees a href with a remote url it would make a request irrespective.

AngularJS itself uses <input /> as a directive and it works fine with the standard input behavior intact.

answered Oct 14, 2014 at 9:13

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Endless Over a year ago

I also use a match for <input> to attach behavior but I'm careful not to mess with angular unless i really wants to. so there is no conflict in having same directive name

Leonardo Over a year ago

So unless I use replace : true in general there should be no issue? If in my example I had used restrict: 'E' for the link directive, then in fact all the `<link>' elements in the application would appear as a custom directive? So they will use my custom behaviour but still the browser will make a standard use of them (unless I replace them), isn't it?

Chandermani Over a year ago

Yes, i think so. if it works for input, it should work for link. Why don't you give it a try and share your findings. Directives is a vocabulary defined by Angular, at the end everything is a html element or attribute.

Collectives™ on Stack Overflow

Angularjs - custom directive with the same name of standard html elements

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related