ng-click 不会打开新窗口答案

【问题标题】：ng-click doesn't open new windowsng-click 不会打开新窗口
【发布时间】：2015-06-08 22:05:39
【问题描述】：

我有一个表格，其中最后一列包含应该打开一个新窗口但它们没有的按钮。这是我的代码：

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

有人可以帮助我吗？提前致谢！

【问题讨论】：

您的浏览器会阻止弹出窗口吗？单击按钮时检查 URL 栏以确保它没有。
您无法访问超出范围的窗口。包括函数在内的角度表达式是根据范围评估的。全局对象不能按原样访问。只需将它绑定到控制器上的一个函数并从那里打开它。
重复？ stackoverflow.com/questions/23069481/…
我想window.[...] 被评估为$scope.window.[...]

标签： javascript html angularjs angularjs-ng-click

【解决方案1】：

请将函数定义为 $scope 或 $rootScope，并在 ng-click 时调用该函数。

例子：

在$范围内

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

或者

在 $rootScope 中

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

在 html 中，试试这个

 <td class="btnCrea"><button class="btn2 btn-default2" ng-click="openurl('/apex/creaRicavoM?id={{item.id}}')">Crea</button></td>

【讨论】：

对不起，我不能投票给你的答案...它至少需要 15 个声望点，我只有 6 个 :(
当你有15个点和时间时，那就去做吧。非常感谢您。

【解决方案2】：

您应该使用 Angular 的 $window 服务从 ng-click 处理程序中访问窗口对象。

在你的控制器中，添加一个函数到作用域，例如

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

然后在你的模板中，你可以使用：

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

另外，不要忘记将$window 注入您的控制器。

【讨论】：

Javascripts window 不能直接使用吗？这个例子表明 $window 服务不是必需的：plnkr.co/edit/fdHHrPiwWI1cbUcgdrYx?p=preview，有什么特别的理由要使用它吗？
实际上，是的，它可以，尽管我过去曾遇到过 window.alert() 与摘要循环混淆的问题。另外，引用 Angular 文档...“虽然 window 在 JavaScript 中是全局可用的，但它会导致可测试性问题，因为它是一个全局变量。在 Angular 中，我们总是通过 $window 服务引用它，因此它可能会被覆盖，删除或模拟测试。”
这很公平！ +1 以获得更多“角度方式”的答案！ :D
我已将答案编辑为“应该”而不是“需要”，因为从技术上讲，您不需要使用 $window :)
@Alan 我收到此错误“ReferenceError: $window is not defined”。我在控制器中写了这段代码：“contrl.$inject = ['$scope', '$filter','$window'];”。我哪里错了？

【解决方案3】：

阅读此答案Open links in new window using AngularJS

您应该将您的函数绑定到控制器或指令。还要使用 Angular $window 服务而不是 window 对象

【讨论】：

【解决方案4】：

这样做

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

在控制器中：

        $scope.viewLink = function (url) {
    var ref = window.open(url, '_system', 'location=yes');
}

【讨论】：

这都错了.. 班级也是viewLink ？而ng-click openW 不存在？？

【解决方案5】：

<a href="http://www.google.com" target="_blank">Visit google!</a>

试试这个

【讨论】：

这不是使用ngClick 时忽略target 属性的解决方案。这只是一个普通的 HTML 超链接