问题标签 [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.
javascript - AngularJS:如何将元素转换为使用 ng-repeat 的模板?
我有一个轮播指令,其中包括一些分块,以将传入的数组映射items
到元素结构数组的数组中,然后生成类似于下面的伪代码的标记:
这个的角度模板看起来像这样:
鉴于我的视图代码:
我希望嵌入的元素绑定到item
最深的对象ng-repeat
此处提供了带有简化测试用例的完整 Plunker:http: //plnkr.co/edit/kYItcXV0k9KvnpiYx1iG
问题是我无法将ng-transclude
属性放入ng-repeat
并且(如carousel.js
Plunkr 中的指令文件所示)我似乎无法使用步骤中的transclude()
函数将要嵌入的标记手动注入该位置compile
指示。
任何想法将不胜感激。
angularjs - Angular 嵌入指令仅第一次绑定
我正在开发一个简单的就地编辑指令。我的目标是使用指令内容(表单)作为模板,并将输入字段更改为标签。单击表单时,指令应将其替换为原始编辑器内容。
我创建了一个plunk。在这里检查。
它第一次绑定其数据,但不再绑定它们。
我的问题:我的概念有什么问题?如何修复它以破坏预期的行为?
任何帮助或评论都值得赞赏。我被困在这里了。谢谢。
angularjs - 什么是 ng-transclude?
我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题,但没有一个用外行人的术语解释它是什么。
文档中的描述如下:
为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。
这相当令人困惑。有人可以用简单的术语解释 ng-transclude 的用途以及可能在哪里使用吗?
javascript - AngularJS:在元素嵌入中保持对模型的访问
Plunker: 直接编辑示例。
在上面的 plunker 中,我有一个指令(直接编辑),它使用
用其他标记包围元素。该指令
将附加标记连接到模型。但是,由于初始元素被 ng-transclude 包裹,它与模型断开连接。有谁知道如何解决这一问题?
编辑(来自下面的评论):
澄清一下:我想采取任何任意指令:
并添加直接编辑指令,以便任意指令与直接编辑值的字段配对。为简单起见,我仅在示例代码中显示文本输入。
angularjs - 与控制器双向绑定的角度嵌入指令未更新
我正在使用此https://github.com/blackgate/bg-splitter创建水平和垂直窗格拆分器。(完整代码在我创建的 plunkr 中)
自从我开始使用它以来,我遇到了控制器和指令的双向绑定的问题。
该指令有两个变量,listData 和 selectedOption:
控制器具有这些变量,并具有监视功能以监视更改:
该指令的使用如下:
如果没有 paneSplitter,下拉菜单正在工作。出于某种原因,当绑定变量在下拉指令中更新时,它不会在控制器中更新。这可能是一个范围问题,但我自己似乎无法弄清楚。任何帮助是极大的赞赏。请参阅以下带有完整代码的 plunkr:
javascript - AngularJS:如何在使用嵌入的指令中访问 ng-model 的范围值?
我有一个应用程序控制器,负责将用户添加到另一个模型。在我的应用程序中添加用户有两种方法。我们可以通过选择用户自己来添加它们,或者通过选择整个组来添加该组的所有用户。
为了使 UI 更友好一点,我认为最好有标签来单独和通过组添加用户......这样我就不必同时显示两个表单 - 用户可以翻转使用选项卡在表单之间。
为了实现选项卡,我使用了 Angular 指令,因为我在应用程序的其他地方使用了这些选项卡。这是向您展示如何实现选项卡的 html 代码:
在这个 HTML 的控制器中,我很想访问 和的tab-pane
ng-model 值。我原以为由于它们被定义为嵌入,所以范围将是应用程序的控制器本身,但我认为范围值实际上是在指令的范围内。这意味着在我的主应用程序控制器中,并没有定义。selectedUsers
selectedUserGroups
tab-pane
$scope.selectedUsers
$scope.selectedUserGroups
如果我暂时删除tabs
andtab-pane
指令,主控制器中的一切都会正常工作。所以我认为ng-model
当这些指令被嵌入到tab-pane
.
我如何访问它?
angularjs - 如何嵌入任何东西
我将一个 SVG 元素嵌入到另一个 SVG 指令中。这是名为“组件”的父指令的模板:
这是使用该指令的标记:
我想根据嵌入元素<rect>
的测量大小调整模板中的大小。<text>
如何获得对嵌入<text>
元素的引用以测量它并设置适当的rectWidth
and rectHeight
?
templates - 从模板输入自动创建 MediaWiki 页面
我有一个获取多个用户输入的模板。对于这些特定输入之一,我想使用该输入的内容自动创建一个新页面。
示例:wiki.com/wiki/Article
我希望从输入到数据中的内容自动创建一个页面。因此,将创建当前页面的新子页面(称为数据)。
wiki.com/wiki/Article/Data 有以下内容
这在 MediaWiki 软件中是否可行,无论是通过扩展还是软件本身?
编辑:这个扩展http://www.mediawiki.org/wiki/Extension:WikiDB基本上会做我上面描述的。它会将数据定义到不存在的页面,并允许您检索此数据以在其他地方使用。
javascript - ng-transclude as:元素与属性
我想创建一个包装器指令,用作列表中通知小部件的框架。在那个框架中,我想稍后根据notif
对象的属性嵌入一些特定的内容。目前我硬编码了一个div
元素。
我在 index.cshtml 中有以下内容:
这是指令规范:
为什么以下工作,即div
在紫红色背景中显示嵌入?
...但是如果我像元素一样使用它,紫红色 div 将不再显示。
ng-transclude
如果我用作属性或元素有什么区别。(我使用火狐)。
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 的唯一解决方案?