Javascript 如何使用AngularJS中的绑定来处理iframe内容

我正在构建一个基本上是CMS/网站编辑器的应用程序。当应用程序加载时，我有一套工具，允许用户更改他们网站的文本内容、颜色、图像和一些其他功能

使用AngularJS模型和控制器控制数据。目前，用户可以从中使用的所有模板都是html页面，我需要将它们加载到应用程序内部的iframe中

目前我有一个控制器，负责iframe和其中的html内容

控制器看起来像这样

function SiteTempCtrl($scope, MainDM)
{
    $scope.dm = MainDM;
    $scope.percent = 100;
    window.onIframeLoad = function()
    {
        $scope.$apply(function()
        {
            $scope.dm.pages = $scope.dm.pages;
        });

    }
}

<div class="col-md-8 content-wrapper" ng-controller="SiteTempCtrl">
    <iframe src="site.html" 
        width="{{percent}}%" 
        height="{{percent}}%" 
        onload="onIframeLoad()">
    </iframe>
</div>

<div class="main-nav " id="main_nav">
    <ul class="menu" id="main_nav_list" >
          <li ng-repeat='title in dm.pages'><a href='#'>{{title}}</a></li>
    </ul>
</div>

正如您所见，我有一个MainDM数据模型，在控制器之间共享。dm.pages是一个数组，只有字符串值才能设置pages菜单项

iframe代码如下所示

function SiteTempCtrl($scope, MainDM)
{
    $scope.dm = MainDM;
    $scope.percent = 100;
    window.onIframeLoad = function()
    {
        $scope.$apply(function()
        {
            $scope.dm.pages = $scope.dm.pages;
        });

    }
}

<div class="col-md-8 content-wrapper" ng-controller="SiteTempCtrl">
    <iframe src="site.html" 
        width="{{percent}}%" 
        height="{{percent}}%" 
        onload="onIframeLoad()">
    </iframe>
</div>

<div class="main-nav " id="main_nav">
    <ul class="menu" id="main_nav_list" >
          <li ng-repeat='title in dm.pages'><a href='#'>{{title}}</a></li>
    </ul>
</div>

当在iframe上触发onload事件时，我在控制器中运行onIframeLoad函数。火开得很好。问题是HTML内部的AngularJS绑定，而在iframe中加载的绑定不起作用

iframe html中的代码如下所示

function SiteTempCtrl($scope, MainDM)
{
    $scope.dm = MainDM;
    $scope.percent = 100;
    window.onIframeLoad = function()
    {
        $scope.$apply(function()
        {
            $scope.dm.pages = $scope.dm.pages;
        });

    }
}

<div class="col-md-8 content-wrapper" ng-controller="SiteTempCtrl">
    <iframe src="site.html" 
        width="{{percent}}%" 
        height="{{percent}}%" 
        onload="onIframeLoad()">
    </iframe>
</div>

<div class="main-nav " id="main_nav">
    <ul class="menu" id="main_nav_list" >
          <li ng-repeat='title in dm.pages'><a href='#'>{{title}}</a></li>
    </ul>
</div>

---

我不确定我需要做什么才能让AngularJS处理这种类型的HTML内容。这将是非常重要的，因为用户可以选择更改html模板，我将在用户使用应用程序的过程中将html重新加载到iframe中，并且我需要刷新angular以使绑定和函数正常工作

如果我误解了你的问题，请纠正我，马特。如果理解准确，那么你实际上是在一个角度的应用程序中包装CMS和IFrame，我看不出它在工作。我建议考虑使用本文中描述的postMessage在他们之间进行通信。是的，我希望它们都包装在同一个应用程序中。我想知道在iframe触发onload后，我想将角度上下文注入iframe的html中。我看到的唯一一个黑客是尝试在iframe JS中使用window.top共享变量，并在主应用程序中设置所需的变量。这可能会变得非常丑陋。