Question

我正在尝试从子弹出窗口更新父窗口的范围值。但是每当我尝试访问父窗口范围时，它都会返回undefined。因为它涉及两个窗口，我无法为此创建一个小提琴。代码示例粘贴在下面。

主页（main.html）

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
     var myApp = angular.module('myApp',[]);
     function MyCtrl($scope) {
        $scope.name = 'Superhero';
    }
    </script>
  </head>
  <body ng-app="myApp">
   <div id="ctrl" ng-controller="MyCtrl">
      Hello, {{name}}!
      <input type="button" value="Open popup!!" onclick="window.open('child.html');"/>
    </div>
  </body>
</html>

子窗口（child.html）

<!doctype html>
<html >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
     function change(){
      var e = window.opener.document.getElementById('ctrl');
      var ae = angular.element(e);
      var s = ae.scope();
      s.name="New Superhero";
      s.$apply();
     }
    </script>
  </head>
  <body>
      <input type="button" value="Update parent scope!" onclick="change();"/>
  </body>
</html>

每当我尝试从angular元素访问范围时，如上面的change方法所示，它返回undefined [ae.scope（）]。但是当相同的代码移动到父窗口中的函数时[仅区别于'ctrl'元素正在被访问]，它工作正常，我能够更新范围变量。任何人都可以指出这里究竟出了什么问题吗？感谢

Answer 1

我有类似的需求，并且使用angular.element访问范围时遇到了同样的问题。我能够解决它如下：

在您的主/父控制器中执行以下操作：

$scope.food = 'Mac & Cheese';
window.$windowScope = $scope;
$window.open('views/anotherWindow.html', '_blank','menubar=yes,toolbar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,personalbar=yes');

然后在子窗口控制器中，您可以像这样访问$ windowScope：

$scope.parentWindow = window.opener.$windowScope;
console.log($scope.parentWindow.food);

将数据直接放入范围的另一种方法是使用$ window范围broadcast and/or emit events，这是角度交叉控制器通信的首选方式。

Answer 2

使用开场白的angular参考：

function change() {
  var s = window.opener.angular.element('#ctrl').scope();
  s.name="New Superhero";
  s.$apply();
}

从子窗口访问父窗口角度范围

2 个答案: