如何使用angularjs在新窗口中打开链接

Posted 2023-03-14

【中文标题】如何使用angularjs在新窗口中打开链接

【英文标题】：How to open link in new window using angularjs

【发布时间】：2015-09-13 01:10:08

【问题描述】：

我正在使用 angularjs 和 codeigniter 开发系统。 我想做什么：

每个用户都有一个锚标签 [edit]（用户列表使用 ng-repeat 显示） 单击编辑我想打开新窗口。打开新窗口不是问题。我想将 user_id 传递给那个新寡妇。所以问题是：

passing user_id

。 当我转到新窗口时，在编辑更新完成后（编辑更新不是问题），我想

刷新当前应用程序

（以前的寡妇：从我切换的位置）。

希望你能解决我的问题。

示例代码：

<div ng-repeat="user in allUsers">
Only displaying : user.user_id, It is OK.
<a title="Edit in new window" href='javascript:window.open(\"".base_url()."phpcontroller/loadingview/user_id \",\"User Edit\", \"width=\"+screen.width+\",height=\"+screen.height+\",fullscreen=yes,location=no\");'  >Test edit</a>
</div>

这个 html/php 页面是通过 angularjs 加载的。所以它是部分的，这就是为什么我不能在这里使用 php 功能（例如 base_url()、php 变量）。我怎样才能部分给出基本路径。

有没有办法在 app.js 或 controllers.js 中全局声明 base url

，以便我可以在局部使用它？

请尽量给出建议、解决方案。如果您没有清楚地了解我的问题，请发表评论。谢谢。

更新：问题不是 *** 上任何问题的完整副本。

【问题讨论】：

Open links in new window using AngularJS 的可能重复项

@SagarNaliyapara：我已经访问过提到的链接，它并不完全重复。请尝试阅读该帖子。

您在制作混合应用程序吗？

看，我是 angularjs 的新手，所以尝试单独做一些事情，这也是需要的。你可以说它的混合体。目前这只是任务，我必须执行！

检查这个 plunker 并告诉我这是否是您正在寻找的行为？ here

【参考方案1】：

如果你想以有角度的方式来做，你可以做这样的事情

angular.module('myApp', [])
    .controller('myController', ['$scope', '$window', function($scope,$window) 
  $scope.openWindow = function(greeting) 
    $window.open("http://www.google.com", "", "width=640, height=480");
  ;
]);

HTML 代码

<div ng-controller = "myController"> 
<a title="Edit in new window" ng-click="openWindow() >Test edit</a>
</div>

【讨论】：

很好，我认为它适用于打开新窗口，但如何将 user_id 传递给该新窗口？

你将无法使用 AngularJS 来做到这一点。

@skubski：一定有办法解决这个问题！

您正在尝试将单页应用程序用作多页应用程序。您需要让您的 PHP 框架处理您正在构建的多个 SPA 之间的路由。您可以通过以下方式在 JS 中检索 URL：window.location.href 或 document.URL。您需要从该 URL 解析 ID。

所以问题是：如何将该 ID 传递给 URL。

【参考方案2】：

在 Angular js 中，您可以执行类似的操作，

 $scope.newWindow = function(value) 
    $window.open("http://your_url/routing_path/?key=value", "");
  ;

其中 routing_path 将是您的路由 url，而 value 是您实际发送值的部分。

在你的脚本中你可以有喜欢

var myApp = angular.module('myApp', []);
myApp.run(function($rootScope, $location, $http, $timeout) 

 $rootScope.$on('$routeChangeStart', function(event, next) 

     if (next.originalPath === 'your_routing_url') 
        var value = next.params.key;
     
    );
);

【讨论】：

我们在 url 中作为参数传递的任何值都将在此事件中可用。它应该可以工作。

在启动您的应用时没有 $routeChangeStart 事件，除非定义了路由并且您触发了默认路径。

@skubski：没有两个 ng-apps。

$routeChangeStart 在任何路由发生之前被触发。请参考 Angular js 文档docs.angularjs.org/api/ngRoute/service/$route

@SujVan：在空白目标中打开的 html 不会成为您主要 ng-app 的一部分。

【参考方案3】：

你也可以使用 Web Storage 对象，

        var myApp = angular.module('myApp', []);
    myApp.factory('anyService', function($http, $location) 

    return 
    set: function(key,value) 
        return localStorage.setItem(key,value);
    ,
    get: function(key) 
        return localStorage.getItem(key);
    ,
    destroy: function(key) 
        return localStorage.removeItem(key);
           
    ;
    );

在任何地方注入服务并获取数据。

【讨论】：

localStorage 是浏览器对象，即使在浏览器关闭后也会出现。因此，根据您的要求使用和删除它。