iframe 内的控制器与其外部的控制器 Angular js 之间的交互答案

【问题标题】：Interact between controller inside an iframe to controller outside of it Angular jsiframe 内的控制器与其外部的控制器 Angular js 之间的交互
【发布时间】：2016-09-17 18:05:09
【问题描述】：

我有一个 html，其中有一个 iframe 和一个 div，其中有一个 button。对于这个 html，我有一个父控制器。现在在iframe 中，我正在调用另一个具有button 的html 以及该html 的子控制器。现在我想隐藏主html页面中的div，当我点击iframe内的按钮时。

所以我想要两个不同控制器之间的交互，不同 html 的父子节点之间的交互。我开始知道我们应该使用 service 和 $parent 范围来实现这种事情，但我无法让它发挥作用。如果您遇到这样的事情，有人可以帮助我吗？谢谢！

这里是 plunkr :http://plnkr.co/edit/tpxo5gMZ87dKWampmdOK?p=preview

【问题讨论】：

标签： angularjs iframe

【解决方案1】：

这里是更新的 plunker (http://plnkr.co/edit/EYpEATLGd0B54WpEr7II?p=preview) 的链接，它有两种方式沟通父母与孩子和孩子与父母。如果需要，两种方式的绑定可以通过使用观察者以相同的方式实现：

app.js

appInParentWindow.controller('ParentController', function($scope, $window) {
  $scope.$on('from-iframe', function(e, hide) {
    // toggle visibility
    $scope.parentbtn = !$scope.parentbtn;
  });

  $scope.message = function () {
    // get child scope, we do not use factory since frame is not there yet in that phase
    $childScope = $window.frames[0].angular.element($window.frames[0].frameElement).scope();

    $childScope.$apply(function () {
      $childScope.$emit('from-parent', $scope.messageText);
    });
  };
});

【讨论】：