Question

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

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

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重新加载到用户的corse上的iframe，我将需要刷新角度以获得绑定和工作的功能。

如何在AngularJS中绑定以使用iframe内容

0 个答案: