angularjs variable in javascript

Question

This is the first time to use angular js.

The following code gives desired output:

<a href="http://www.example.com/xyz/{{life.animal}}/" target="_blank">Hello </a>

It opens a page: http://www.example.com/xyz/cat/

But the below code is not working as expected:

<a href='javascript:void(0)' onClick='javascript:window.open("http://www.example.com/xyz/{{life.animal}}/","Windows","width=1150,height=450,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,titlebar=no,location=no,directories=no,status=no");return false')'>Hello </a>

It opens page: http://www.example.com/xyz/{{life.animal}}/

I think I am doing some basic mistake but please help me.

Answer 1

The Angular scope is not available outside of Angular, i.e. vanilla JS.

To set a click function the angular way you should use ng-click

Create a function in your controller or directive such as

scope.open = function() { $window.open(...) }

In the template do

ng-click="open()"

Answer 2

angular doesn't interact with strings, but you try to do that in your onclick handler that opens a window (you pass a string there). Stop the string and concat with the variable:

onClick='javascript:window.open("http://www.example.com/xyz/" + life.animal)'

Also, as @Enzey has noted, use ng-click instead of onClick, and then bring out the javascript from your html and do that stuff in a controller instead.

E.g.:

HTML

<a href="javascript:void(0)" ng-click="myFunction()">Foo</a>

Controller

$scope.myFunction = function() {
    window.open(...whatever...);
}

Answer 3

The double hash are used for angular directives not for Javascript Vanilla apart of that is better if you use ng-href instead href in a <a> tag. You can check this here