问题标签 [transclusion]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
945 浏览

javascript - AngularJS:如何将元素转换为使用 ng-repeat 的模板?

我有一个轮播指令,其中包括一些分块,以将传入的数组映射items到元素结构数组的数组中,然后生成类似于下面的伪代码的标记:

这个的角度模板看起来像这样:

鉴于我的视图代码:

我希望嵌入的元素绑定到item最深的对象ng-repeat

此处提供了带有简化测试用例的完整 Plunker:http: //plnkr.co/edit/kYItcXV0k9KvnpiYx1iG

问题是我无法将ng-transclude属性放入ng-repeat并且(如carousel.jsPlunkr 中的指令文件所示)我似乎无法使用步骤中的transclude()函数将要嵌入的标记手动注入该位置compile指示。

任何想法将不胜感激。

0 投票
1 回答
298 浏览

angularjs - Angular 嵌入指令仅第一次绑定

我正在开发一个简单的就地编辑指令。我的目标是使用指令内容(表单)作为模板,并将输入字段更改为标签。单击表单时,指令应将其替换为原始编辑器内容。

我创建了一个plunk。在这里检查。

它第一次绑定其数据,但不再绑定它们。

我的问题:我的概念有什么问题?如何修复它以破坏预期的行为?

任何帮助或评论都值得赞赏。我被困在这里了。谢谢。

0 投票
3 回答
88769 浏览

angularjs - 什么是 ng-transclude?

我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题,但没有一个用外行人的术语解释它是什么。

文档中的描述如下:

为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。

这相当令人困惑。有人可以用简单的术语解释 ng-transclude 的用途以及可能在哪里使用吗?

0 投票
0 回答
35 浏览

javascript - AngularJS:在元素嵌入中保持对模型的访问

Plunker: 直接编辑示例。

在上面的 plunker 中,我有一个指令(直接编辑),它使用

用其他标记包围元素。该指令

将附加标记连接到模型。但是,由于初始元素被 ng-transclude 包裹,它与模型断开连接。有谁知道如何解决这一问题?

编辑(来自下面的评论):

澄清一下:我想采取任何任意指令:

并添加直接编辑指令,以便任意指令与直接编辑值的字段配对。为简单起见,我仅在示例代码中显示文本输入。

0 投票
1 回答
258 浏览

angularjs - 与控制器双向绑定的角度嵌入指令未更新

我正在使用此https://github.com/blackgate/bg-splitter创建水平和垂直窗格拆分器。(完整代码在我创建的 plunkr 中)

自从我开始使用它以来,我遇到了控制器和指令的双向绑定的问题。

该指令有两个变量,listData 和 selectedOption:

控制器具有这些变量,并具有监视功能以监视更改:

该指令的使用如下:

如果没有 paneSplitter,下拉菜单正在工作。出于某种原因,当绑定变量在下拉指令中更新时,它不会在控制器中更新。这可能是一个范围问题,但我自己似乎无法弄清楚。任何帮助是极大的赞赏。请参阅以下带有完整代码的 plunkr:

http://plnkr.co/edit/UnJaPV8LYm3unILEU3Lq

0 投票
0 回答
468 浏览

javascript - AngularJS:如何在使用嵌入的指令中访问 ng-model 的范围值?

我有一个应用程序控制器,负责将用户添加到另一个模型。在我的应用程序中添加用户有两种方法。我们可以通过选择用户自己来添加它们,或者通过选择整个组来添加该组的所有用户。

为了使 UI 更友好一点,我认为最好有标签来单独和通过组添加用户......这样我就不必同时显示两个表单 - 用户可以翻转使用选项卡在表单之间。

为了实现选项卡,我使用了 Angular 指令,因为我在应用程序的其他地方使用了这些选项卡。这是向您展示如何实现选项卡的 html 代码:

在这个 HTML 的控制器中,我很想访问 和的tab-paneng-model 值。我原以为由于它们被定义为嵌入,所以范围将是应用程序的控制器本身,但我认为范围值实际上是在指令的范围内。这意味着在我的主应用程序控制器中,并没有定义。selectedUsersselectedUserGroupstab-pane$scope.selectedUsers$scope.selectedUserGroups

如果我暂时删除tabsandtab-pane指令,主控制器中的一切都会正常工作。所以我认为ng-model当这些指令被嵌入到tab-pane.

我如何访问它?

0 投票
1 回答
144 浏览

angularjs - 如何嵌入任何东西

我将一个 SVG 元素嵌入到另一个 SVG 指令中。这是名为“组件”的父指令的模板:

这是使用该指令的标记:

我想根据嵌入元素<rect>的测量大小调整模板中的大小。<text>如何获得对嵌入<text>元素的引用以测量它并设置适当的rectWidthand rectHeight

0 投票
1 回答
692 浏览

templates - 从模板输入自动创建 MediaWiki 页面

我有一个获取多个用户输入的模板。对于这些特定输入之一,我想使用该输入的内容自动创建一个新页面。

示例:wiki.com/wiki/Article

我希望从输入到数据中的内容自动创建一个页面。因此,将创建当前页面的新子页面(称为数据)。

wiki.com/wiki/Article/Data 有以下内容

这在 MediaWiki 软件中是否可行,无论是通过扩展还是软件本身?

编辑:这个扩展http://www.mediawiki.org/wiki/Extension:WikiDB基本上会做我上面描述的。它会将数据定义到不存在的页面,并允许您检索此数据以在其他地方使用。

0 投票
1 回答
980 浏览

javascript - ng-transclude as:元素与属性

我想创建一个包装器指令,用作列表中通知小部件的框架。在那个框架中,我想稍后根据notif对象的属性嵌入一些特定的内容。目前我硬编码了一个div元素。

我在 index.cshtml 中有以下内容:

这是指令规范:

为什么以下工作,即div在紫红色背景中显示嵌入?

...但是如果我像元素一样使用它,紫红色 div 将不再显示。

ng-transclude如果我用作属性或元素有什么区别。(我使用火狐)。

0 投票
1 回答
160 浏览

caching - 可怕的嵌入缓存如何在 MediaWiki 上工作?

我们正在运行一个小型 wiki 农场(相同主题;六种语言并且还在不断增长),并且最近更新了大多数模板以使用多层元模板,以便于维护和可读性。

我们希望为所有语言标准化这些模板,因此它们中的大多数将在每个 wiki 上包含完全相同的代码。这就是为什么,为了进一步简化维护,我们正在考虑使用可怕的嵌入(更具体地说,替换),以便这些元模板只存储在一个 wiki 上,并且只需要在该 wiki 上进行更新,而不是在每个单版。

(注:如果您能想到更好的主意,请不要犹豫对这篇文章发表评论!)

然而,可怕的嵌入被称为效率低下,因此我需要更多地了解 MediaWiki 缓存该方式包含的内容的方式。

如果我理解正确,页面的 HTML 输出将存储在解析器缓存中,持续时间为 $wgParserCacheExpireTime。默认值为 1 天,但在中小型 wiki 上增加它是安全的,因为如果页面本身或包含的页面被更新(以及在其他一些小情况下),内容无论如何都会得到更新。

还有一个可怕的嵌入的缓存持续时间:$wgTranscludeCacheExpiry。很好,因为您不想每次都进行 HTTP 调用。但是,默认值 1 小时不适合较小的 wiki,在这些 wiki 上可能只能不时查看文章,因此使缓存完全无用。

  • 如果页面 A 使用包含来自另一个 wiki 的模板 C 的模板 B,是否必须在超过 $wgTranscludeCacheExpiry 后完全重新生成页面 A?或者在超过 $wgParserCacheExpireTime 之前它仍然可以使用模板 B 的解析器缓存吗?

  • 然后您可以将 $wgTranscludeCacheExpiry 增加到一个月,就像解析器缓存一样,但是如果嵌入的模板是,页面不会自动更新,对吗?

  • 如果是,那么使用该嵌入模板刷新页面是否是更新其他 wiki 的唯一解决方案?