4

I have a table in which the last column contains buttons that should open a new window but they don't. Here is my code:

<table class="table  table-hover" id="angular_table">
  <thead>
    <tr>
      <th class="company">Nome azienda&nbsp;<a ng-click="sort_by('company')"><i class="icon-sort"></i></a></th>
      <th class="code">Codice&nbsp;<a ng-click="sort_by('code')"><i class="icon-sort"></i></a></th>
      <th class="projectName">Nome progetto&nbsp;<a ng-click="sort_by('projectName')"><i class="icon-sort"></i></a></th>
      <th class="recordType">Tipo di record&nbsp;<a ng-click="sort_by('recordType')"><i class="icon-sort"></i></a></th>                            
      <th class="year">Anno&nbsp;<a ng-click="sort_by('year')"><i class="icon-sort"></i></a></th>
      <th class="month">Mese&nbsp;<a ng-click="sort_by('month')"><i class="icon-sort"></i></a></th>
      <th>Crea ricavo&nbsp;</th>
    </tr>
  </thead>                        
  <tbody>
    <tr ng-repeat="item in items | filter:query:checkEqual | orderBy:sortingOrder:reverse " id="lista">
      <td>{{item.company}}</td>
      <td >{{item.code}}</td>
      <td style="text-align: -webkit-left;"> <a href="/{{item.id}}" target="_blank">{{item.projectName}}</a></td>
      <td>{{item.recordType}}</td>                            
      <td>{{item.year}}</td>
      <td>{{item.month}}</td>
      <td class="btnCrea"><button class="btn2 btn-default2" ng-click="window.open('/apex/creaRicavoM?id={{item.id}}','_blank','heigth=600,width=600')">Crea</button></td>
    </tr>
  </tbody>
</table>

Can someone help me? Thanks in advance!

Razvan B.
  • 6,721
  • 2
  • 19
  • 32
DarkSkull
  • 1,041
  • 3
  • 13
  • 23
  • 1
    Does your browser block popups? Check the URL bar when you click the button to make sure that it doesn't. – Oskar Eriksson Jun 08 '15 at 13:45
  • 3
    You cannot access window out of scope. Angular expressions including functions are evaluated against scope. global objects are not accessible as is. Just bind it to a function on the controller and open it from there. – PSL Jun 08 '15 at 13:45
  • Duplicate of ? http://stackoverflow.com/questions/23069481/how-to-allow-open-in-a-new-tab-when-using-ng-click – Lau Jun 08 '15 at 13:47
  • I imagine `window.[...]` is being evaluated as `$scope.window.[...]` – Tom Jun 08 '15 at 13:47

5 Answers5

9

Please define the function into $scope or $rootScope, and call that function on ng-click.

Example :

in $scope

$scope.openurl = function(url){
    window.open(url, '_blank','heigth=600,width=600');   // may alse try $window
}

Or

in $rootScope

 $rootScope.openurl = function(url){
        window.open(url, '_blank','heigth=600,width=600');   // may alse try $window
    }

In html, Try this

 <td class="btnCrea"><button class="btn2 btn-default2" ng-click="openurl('/apex/creaRicavoM?id={{item.id}}')">Crea</button></td>
rajeshpanwar
  • 1,223
  • 1
  • 11
  • 25
2

You should use Angular's $window service to access the window object from within an ng-click handler.

Within your controller, add a function to the scope, e.g.

$scope.popupWindow = function(itemId) {
    $window.open('/apex/creaRicavoM?id=' + itemId,'_blank','heigth=600,width=600');
}

And then in your template, you can use:

ng-click="popupWindow(item.id)"

Also, don't forget to inject $window into your controller.

Alan
  • 2,962
  • 2
  • 15
  • 18
  • can Javascripts `window` no be used directly ? this example shows that $window service is not required: http://plnkr.co/edit/fdHHrPiwWI1cbUcgdrYx?p=preview , is there any specific reason to use it ? – Pogrindis Jun 08 '15 at 13:52
  • Actually, yes it can, though I've hit problems with window.alert() in the past messing with the digest cycle. Also, to quote the Angular docs... "While window is globally available in JavaScript, it causes testability problems, because it is a global variable. In angular we always refer to it through the $window service, so it may be overridden, removed or mocked for testing." – Alan Jun 08 '15 at 13:54
  • thats fair enough ! +1 for the more 'Angular way' answer then! :D – Pogrindis Jun 08 '15 at 13:54
  • I've edited my answer to say "should" instead of "need to", as technically, you don't need to use $window :) – Alan Jun 08 '15 at 13:57
  • @Alan I got this error "ReferenceError: $window is not defined". I wrote in my controller this code: "contrl.$inject = ['$scope', '$filter','$window'];". Where am I wrong? – DarkSkull Jun 08 '15 at 13:59
  • @DarkSkull have you passed `$window` into your function too ? – Pogrindis Jun 08 '15 at 14:00
  • As @Pogrindis says, you'll need to use `var contrl = function($scope, $filter, $window) { ... };` as well. I never use $inject syntax myself, but I think what you've got there is correct otherwise. – Alan Jun 08 '15 at 14:07
  • Thank you guys! I resolved with rajeshpanwar's answer. – DarkSkull Jun 08 '15 at 14:08
0

Do this 

        <td class="btnCrea"><button class="btn2 btn-default2" ng-click="viewLink(your URL)">Crea</button></td>

In controller : 

        $scope.viewLink = function (url) {
    var ref = window.open(url, '_system', 'location=yes');
}
carton
  • 1,168
  • 9
  • 17
0

Read this answer Open links in new window using AngularJS

You should bind your function to a controller or directive. Also use the Angular $window service instead of the window object

Community
  • 1
  • 1
Tobias Timm
  • 1,855
  • 15
  • 27
-2
<a href="http://www.google.com" target="_blank">Visit google!</a>

try this

Venkatesh TR
  • 80
  • 5
  • this is not a solution when using `ngClick` the `target` attribute is ignored. This is just a plain HTML hyperlink – Pogrindis Jun 08 '15 at 13:49