open external link in angulardart in new tab/window

Question

I am writing an angular dart app and the app contains a few links that point to other resources on the server. I have a weird experience that some links are "handled" by angular and some not.

For example in the code I have these two links that are close to each other. Both are inside the same controllers scope. The first link is handled by angular, the second is opened in a separate window as configured. (Maybe due to the hashbang in the url?)

...
  <div class="span4">
    <div class="address">Direktlink</div>
      <a href="http://localhost/#!h_name=Aachen&amp;h_variant=8&amp;d_sel=23" target="_blank" class="ng-binding">not working link</a>
     </div>
   </div>
   <div class="row-fluid">
      <div class="span12 modal_image">
        <a href="http://localhost/modules/mod_orchit_baumodul/ajax/composite.php?haus=Aachen&amp;variante=8&amp;pos=0" target="_blank" class="ng-binding"> <img src="http://localhost/modules/mod_orchit_baumodul/ajax/composite.php?haus=Aachen&amp;variante=8&amp;pos=0" class="ng-binding"></a>
          </div>
       </div>
     </div>

So I created a small directive

/**
 * https://github.com/angular/angular.dart/issues/335
 * https://github.com/angular/angular.dart/issues/864
 */
@NgDirective(
    selector: 'a[externalLink]'
)
class ExternalLinkDirective {
  Element element;

  ExternalLinkDirective(this.element) {
    element.onClick.listen((Event event){
      window.location.assign(element.attributes["href"]);
    });
  }
}

but this has the disadvantage that I can't open the link in a new tab or window. I couldn't find something that helped me with that in the API docs. :-(

Is there a way to open the first link in a new tab too?

Answer 1

OK, I figured it out. But it opened a new window each time, so I check for the target first. Feel free to use this directive yourself.

/**
 * https://github.com/angular/angular.dart/issues/335
 * https://github.com/angular/angular.dart/issues/864
 */
@NgDirective(selector: 'a[externalLink]')
class ExternalLinkDirective {
  Element element;

  ExternalLinkDirective(this.element) {
    element.onClick.listen((Event event) {
      String target = "_SELF";
      if (isValidTarget()){
        window.open(element.attributes["href"], element.attributes['target']);
      }
      else window.location.assign(element.attributes["href"]);
    });
  }
  bool isValidTarget(){
    return element.attributes.containsKey("target") && element.attributes['target'].toLowerCase()!='_self';
  }
}

Answer 2

Since route_hierarchical-0.4.19 this issue seems to be fixed.