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.
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>