当前位置: 首页 > 面试题库 >

是否可以在iframe中更新angularjs表达式?

郑嘉年
2023-03-14
问题内容

所以…例如,我正在尝试将一个电子邮件“模板”引入iframe中,作为angularjs应用程序内用户的“预览”。iframe位于控制器区域内(我们称其为MainCtrl)。然后,用户将能够使用MainCtrl内提供的表单元素基于其输入来更新预览。举例来说,假设我们将模板拉入iframe的过程如下所示:

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style type="text/css">
    .some {styles: here};
    </style>
</head>

<body>
    <h1>{{header}}</h1>

    <p>{{body}}</p>

</body>

</html>

因此,在我们的index.html(angularjs应用)中,我们将具有绑定到{{header}}和{{body}}的表单元素…

<div ng-controller="MainCtrl">
    <input type="text" ng-model="header" placeholder="header text" />
    <input type="text" ng-model="body" placeholder="body text" />
    <iframe src="template.html" width="800" height="1500"></iframe>
</div>

那可能吗?angularjs是否可以更新该信息,如果可以,如何更新?我有类似的设置,但似乎无法使用。我无法获取angularjs表达式进行评估…显示的全部是{{body}},依此类推…


问题答案:

如果您从相同的域名运行iframe和父文档(因此不适用跨站点脚本限制),则可以在iframe中调用JavaScript函数,以传递数据。

从浏览器的角度来看,您可能会丢失iframe是一个单独的文档。因此,如果此iframe应该运行AngularJS代码,则需要使其成为一个单独的AngularJS应用程序。

这是一个示例,其中父文档和iframe都是单独的AngularJS应用程序,并且在更改到iframe时将发送父文档中输入的文本的值,在iframe中,在那里运行的AngularJS应用程序会将数据放入合并范围。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk



 类似资料:
  • 问题内容: 昨晚我在玩Java8 Lambda,我想知道是否有可能在运行时检索Lambda表达式。简而言之,据我所知,Lambda表达式在运行时被转换为(静态)方法,然后使用InvokeDynamics进行调用。 让我们举一个这样的例子: 其中将是以a 作为参数的自定义方法。在此方法内部,在这种情况下,如何以类似于Lambda表达式()的形式检索参数? 我尝试使用ASM5_BETA读取参数类的生成

  • 问题内容: 我正在编写一个应用程序,它是Angular和jQuery的一部分。我通过在iFrame中加载jQuery内容来分离它们。 在某个事件(例如,单击ng)时,我需要刷新iFrame。我的控制器包含以下代码: 而iFrame是: 问题答案: 正如Paulo Scardine所说,正确的方法是通过指令,因为您不应该使用控制器来操纵DOM。 这样的事情可以做: 然后可以这样使用: 和:

  • 问题内容: 我想获取所有具有与某些正则表达式匹配的文本的div / links / ..的xpath计数。例如: 我希望能够致电: 并使其返回2。(当然,这是一个简单的示例,我想使用各种正则表达式) 这可能吗,怎么办? 问题答案: 使用允许您使用javascript 的协议。而javascript具有regexp:

  • 问题内容: 是否可以动态更改全局样式表? 编辑:目的是允许用户选择他喜欢的样式。 在Angular 1中,我能够将控制器包装在head标签周围并在其中使用绑定。 下面的示例(简化代码): index.html AppController 在Angular 2中有可能吗? 问题答案: 我最终使用了Igor在这里提到的DOCUMENT令牌。 从那里,我可以将href换成样式。 HTML: TS:

  • 问题内容: 我有这个简单的控制器标记 和控制器本身 为什么每次对模型进行少量更改(例如,在文本框内更改一个字母)后,就可以在控制台中看到?在这种情况下这不是问题,但我认为它将在大型应用程序中使用。我可以避免吗? 问题答案: 这是正常的,因为这是AngularJS如何完成其​​“魔术”的必不可少的步骤。 有多种技术可以确保您不会遇到性能问题,但是不会,通常,您不能排除那些表达式的计算。

  • 问题内容: 有没有办法让AngularJS在模型数据中评估表达式? HTML: 模型: 最终结果将是:。 问题答案: 您可以使用该服务来插值字符串… JSFiddle