Jim Parker Jim Parker - 8 months ago 84
AngularJS Question

How to use href="javascript:window.open..." in Angular JS?

I am trying to use an tag in HTML to open a new modal browser window with a url that is retrieve through an Angular value, as so:

<a href="javascript:OpenPopUpPage('{{listing.Linktest}}');">Test Link</a>

The rest of my angular markup works just fine, but the above anchor does not work. In several attempts I'm made, I either don't get a value at all (null), or the resulting URL is marked as "unsafe".

I've tried calling a method within my controller to pass back the value, but same failures.

Am I going about this the wrong way?

Note: OpenPopUpPage is a built-in SharePoint function that I'm using, but I could just as well call window.open or something else. But I think that is immaterial to this problem.

UPDATE: I have create a jsfiddle (warning, first-timer), and attempted to follow a couple of the responses here as a demo, but I can't get any of them to work correctly. My jsfiddle


What you have isn't a normal link. It's more of a <button>, although it could go either way.

The angular way of handling the click to open a new window would then be:

<button type="button" ng-click="$ctrl.click($event)">...</button>

and in your angular code:

function Controller/Copmponent/Directive/Whatever() {
    this.url = 'http://example.com';
    this.click = function () {
        open(this.url, this.target, this.options);

If your page needs to support JavaScript disabled, or if you weren't in angular land at all, it may be reasonable to use an <a> element provided that you give the href a valid URL:

<a href="{{$ctrl.url}}" ng-click="$ctrl.click($ctrl.url, $event)">...</a>