1

我正在构建一个基本上是 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;
        });

    }
}

如您所见，我有一个在控制器之间共享的 MainDM（数据模型）。dm.pages 是一个数组，它只有字符串值，用于设置页面菜单项。

iframe 代码如下所示。

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

当 iframe 上的 onload 事件触发时，我在控制器中运行 onIframeLoad() 函数。那开火就好了。问题是在 iframe 中加载的 HTML 中的 AngularJS 绑定不起作用。

iframe html 中的代码如下所示。

<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 以获得绑定和工作的功能。

4

0 回答 0