Cordova window.open "_system" in Angular async content

Question

I'm creating a feed-like app (ionic sdk: cordova/angular). The app loads html based messages from an async API endpoint. How do I convert or catch the containing anchor href's, so I can transform them to a "_system" new windows instead of the app window I'm working in?

I connected models (simplified):

<article ng-repeat="post in posts">
    <p ng-bind-html="post.html"></p>
</article>

I have my async API logic:

$scope.posts = Api.one("channels", channel.id).getList("posts").$object;

... and I have my directive:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {

            console.log("a href identified");

            // Do the window.open(attrs.href, '_system'); stuff...
        }
    };
});

The directive doesn't respond on dynamicly loaded html.

Answer 1

ng-bind-html won't compile the HTML content - it adds it straight to the document.

Instead of using it, create your own binder:

.directive('myOwnBinder', function($compile, $timeout){
    return {
      restrict: 'E',
      scope: {
        source: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch('source', function(newVal, oldVal) {
          if (newVal === oldVal) return;
          element.html(newVal);
          $compile(element.contents())(scope);
        });
      }
    }
})

... and use it like so:

<my-own-binder source="link"></my-own-binder>

Working Plunker