时间戳

首页 > 解决方案 > 通过iframe访问时Angular js plunkr无法正常工作

javascript - 通过iframe访问时Angular js plunkr无法正常工作

问题描述

我无法在下面的 plunkr 中访问模型的模型，请在下面找到 plunkr。请帮助。

<div ng-controller="PersonCtrl">
  <h2>Teens - using external HTML file as template</h2>
  <iframe src="teen-external.html"></iframe>
</div>

这是任何参考的Plunkr。

标签： javascriptangularjsiframe

解决方案

您的示例中有几个问题，首先将 html 源代码加载到 iframe 中，它将其加载为简单的 html 并将其呈现在 iframe 内，而无需对其进行角度解析以完成所有的 Mastache 插值。

要纠正这个问题，因为您已经创建了一个渲染指令，teen-external.html这将允许 angular 解析所述 html 并插入相关字段。为此，只需使用index.html文件中的指令即可。

<teen-internal> </teen-internal>

或者

<div teen-internal></div>

另一个问题是您试图访问在父母内部定义的变量/模型$scope，如果不通过$scope.$parent. 即使您使用它来执行此操作，$parent它也被认为是一种非常糟糕的做法。为此，更优雅的角度提供了一种从父级到子级的模型/变量传递，为此您需要更改指令代码index.html和teensInternal指令代码。

在你的index.html 或

<div teens-internal teens="teens"></div>

这会将'steens上的属性设置为来自 parent's( ) 。现在在您的指令代码中，您必须定义绑定对属性的工作方式，在这里您可以将其定义为只读的也称为单向绑定（内部完成的修改不会反映在父控制器内部）或可写的双向绑定（两者和共享同一个对象，所以修改反映在双方）做这个改变teensInternal$scopeteensPersonCtrl$scopeteens@teensInternal=teensInternalPersonCtrl

scope: {

},

至

scope: {
  teens: '=' // or "@" for one way binding
},

这告诉指令通过的任何东西都<teens-internal teens="teens"></teens-internal>可以在指令的.teens="<model's name>"$scope

plunkr：plunkr 源码

推荐阅读