使用$ window.location.href在Angular中重定向可以直接调用，但如果从另一个函数调用则不行

I'm trying to redirect from my Angular app to a non-angular page. If I have a redirect function on the $scope and invoke it directly from a UI element via ng-click it works as expected. If I call the function from within another $scope function, though, the page reloads or remains as is. I suspect there is a scoping issue here, but I can't tell what it is. I also tried $window.location.assign() and got the same result.

我正在尝试从我的Angular应用程序重定向到非角度页面。如果我在$ scope上有一个重定向函数,并通过ng-click直接从UI元素调用它,它按预期工作。但是,如果我从另一个$ scope函数中调用该函数,页面将重新加载或保持原样。我怀疑这里有一个范围问题,但我不知道它是什么。我也尝试了$ window.location.assign()并获得了相同的结果。

Why is the redirect working one way, but not the other? Thanks!

为什么重定向工作单向,而不是另一个?谢谢!

Link to CodePen

链接到CodePen

angular.module('myApp',[]);

angular.module('myApp').controller('myCtrl', [ '$scope', '$window', function($scope, $window){
  $scope.destination = "http://www.clientsfromhell.net";
  $scope.redirectStarted = false;

  $scope.redirect = function(target){
    $window.location.href = target;
    $scope.redirectStarted = true;
  };

  $scope.wrapperFunction = function() {
    var altDestination = "http://www.reddit.com/r/CrappyDesign";
    $scope.redirect(altDestination);
  };
}]);

HTML

<div data-ng-app="myApp" data-ng-controller="myCtrl">
  <ul>
    <li>Invoke redirect() directly: <input type="button" value="Direct Invocation" data-ng-click="redirect(destination)" /></li>
    <li>Invoke from wrapper function: <input type="button" value="From Wrapper" data-ng-click="wrapperFunction()" /></li>
  </ul>
  <div data-ng-show="redirectStarted">
    Redirect started
  </div>
</div>

UPDATE

dfsq was right that my problem was not related to Angular. My app is a .NET application, and there was a form on the master page. Because I was using a button of type=submit, the form was being submitted, which cancels the redirect unless you do a preventDefault() on it. In my debugging, I was using an ng-click function on a header element to do the redirect. That worked fine because it didn't submit the form, but it also led me down the wrong path in thinking it was a scoping problem.

dfsq是对的,我的问题与Angular无关。我的应用程序是一个.NET应用程序,主页面上有一个表单。因为我使用的是type = submit的按钮,所以正在提交表单,除非你对它执行了preventDefault(),否则会取消重定向。在我的调试中,我在header元素上使用ng-click函数来执行重定向。这样做很好,因为它没有提交表格,但它也让我走错了路,认为这是一个范围问题。

1 个解决方案

#1

This has nothing to do with Angular. The reason why the wrapper redirect is not working, is that it is using different redirect URL (on reddit domain). This resource has restricted content policy preventing it from being displayed in iframe on different domain pages.

这与Angular无关。包装器重定向不起作用的原因是它使用不同的重定向URL(在reddit域上)。此资源具有受限制的内容策略,阻止其在不同域页面上的iframe中显示。

Сorresponding error:

Refused to display 'http://www.reddit.com/r/CrappyDesign' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

拒绝在一个框架中显示“http://www.reddit.com/r/CrappyDesign”,因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

The first destination URL doesn't have this limitation, so it works flawlessly.

第一个目标URL没有此限制,因此它可以完美运行。

From documentation about X-Frame-Options:

从有关X-Frame-Options的文档:

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a , or . Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

X-Frame-Options HTTP响应头可用于指示是否应允许浏览器在a或中呈现页面。站点可以通过确保其内容未嵌入其他站点来使用此功能来避免点击劫持攻击。

#1