Conditionally add target="_blank" to links with Angular JS
angularjs, javascript
Solution
I was just about to create a directive as suggested and then realised that all you actually need to do is this:
<a ng-attr-target="{{(condition) ? '_blank' : undefined}}">
...
</a>
`ng-attr-xyz` lets you dynamically create `@xyz`, and if the value is `undefined` no attribute is created -- just what we want.
Problem
I am building a navigation tree in Angular JS. Most links in the tree will point to pages within my website, but some may point to external sites. If the href of a link begins with http:// or https:// then I am assuming the link is for an external site (a regex like `/^https?:\/\//` does the trick). I would like to apply the target="_blank" attribute to these links. I was hoping to do this with angular when I am creating my links: ``` <ul> <li ng-repeat="link in navigation"> <a ng-href="{{link.href}}" [add target="_blank" if link.href matches /^https?:\/\//]>{{link.title}}</a> </li> </ul> ``` Can anyone help me out? Thanks