问题标签 [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.
angularjs - 包装和修改任意内容的 angularjs 指令,其中包括 ng-repeat
我正在尝试建立一个指令:
- 包装任意内容
- 将锚标记添加到该内容中找到的所有“h4”元素
这是我到目前为止所拥有的东西。
如果包装的内容是静态的,似乎可以正常工作,但是:
整个包装的内容重复两次
我对 transcludeFn 的调用是否有效地重复了 ng-trasclude 正在做的工作?我需要用自己的 impl 替换 ng-transclude 吗?
指令找不到嵌套 ng-repeat 生成的“h4”标签
看起来像 transcludeFn 中传递给 cloneLinkFn 的“克隆”是 pre-ng-repeat 执行。认为 $compile(clone)(scope) 然后会产生 post-ng-repeat 版本,但这似乎也不起作用。
我真的很感激我做错了什么的提示或解释。
谢谢你,-尼基塔
angularjs - AngularJS:如何在自定义指令中正确嵌入子元素?
这是一些代码:链接
我正在尝试创建一个指令,将其子项包装在一些样板文件中。但如果孩子们ng-if
控制了自己的外表,“嵌入”就不起作用了。好吧,确实如此,但是正如您所看到的,ng-if
逻辑没有正确通过。
我想知道如何修复它,但也想知道 Angular 文档中描述的位置(如果有的话)。
angularjs - 父关闭时关闭嵌套的 UI Bootstrap 手风琴
在 AngularJS 中,我使用了一个 bootstrapUI 手风琴指令,该指令在其中一个窗格中包含一个嵌套手风琴。
当我关闭“父母”时,我想关闭它的“孩子”。我遇到了麻烦,因为手风琴指令使用了嵌入,而作用域实际上是兄弟姐妹,而不是父子关系。
javascript - React.js:将一个组件包装到另一个组件中
许多模板语言都有“slots”或“yield”语句,允许执行某种控制反转来将一个模板包装在另一个模板中。
Angular 有“transclude”选项。
Rails 有yield 语句。如果 React.js 有 yield 语句,它看起来像这样:
期望的输出:
唉,React.js 没有<yield/>
. 如何定义 Wrapper 组件以实现相同的输出?
angularjs - 嵌入 (true) - 组合值
考虑以下代码(http://jsbin.com/IfejIWES/1/):
HTML:
JS:
使用AngularJS 的1.1.3版本,输出将my-directive(在 HTML 中)中的按钮和锚点与模板内部文本“这是我的指令内容”结合在一起。
如果我将版本更改为1.2.1,my-directive 内容将替换模板内部文本。
有没有办法让 angular 1.2.1(及更高版本)执行较旧的行为?
angularjs - angularjs中transclusion的主要用途是什么
我最近在指令中遇到了嵌入,有这个概念的目的是什么。据我所知,它封装了一个对象,并且可能有 2 路绑定。但这可以通过在指令的范围属性中使用“=”来实现。那么指令有什么大不了的呢?
javascript - 如何使用嵌套指令保留范围?
我的目标是为可重用和轻量级的 UI 元素创建一组灵活的指令。每个都有一个孤立的范围,其中许多都包含内容。我希望每个指令都是一个黑盒子——理想情况下,用户在编写要嵌入的内容时不需要知道它是否在内部嵌套了另一个指令。
根据Angular 指令指南:
transclude 选项改变了范围嵌套的方式。它使得嵌入指令的内容具有指令外部的任何范围,而不是内部的任何范围。在这样做时,它使内容可以访问外部范围。
我发现这在使用单个指令时可以正常工作。但是,如果有另一个指令嵌套在该指令中,该指令也包含内容,那么被包含的内容将在外部指令的范围内解析,而不是在外部指令的范围内。这是一个问题,因为它使用户无法知道他们的嵌入内容将在什么范围内得到解决!
例如:(小提琴)
和 HTML:
<inner></inner>
元素内部{{value}}
在父范围内被评估为“main”(如预期的那样)。但是,内部<outer></outer>
元素{{value}}
在隔离范围内被评估outer
为“外部”(不是预期的)。这样,指令的模板就可以影响到被嵌入的内容被解析的范围!
有没有办法解决这个问题?
angularjs - AngularJS:指令中的 ng-transclude 并向父级发送事件
我有这样的自定义指令:
fold 指令有这样的模板:
在声音按钮控制器中,我必须这样做:
如果我希望控制器接收事件:
发生了什么:创建 3 个作用域:
在 sound-button 指令中,$scope.$emit 会命中 ng-transclude 范围,它是我想要命中的范围的兄弟。
所以我使用 $scope.$parent.$prevSibling 来点击正确的控制器。它有效,但有更好的方法吗?
谢谢 !
javascript - AngularJS:嵌入指令和对模型的访问
我正在创建一个smart input
指令,它将包装一个文本输入元素,它需要访问输入元素上的模型才能操作指令上的某些类。
因为输入元素可以是多种类型之一(文本、电子邮件、密码),所以我需要嵌入指令并能够为每种类型添加不同类型的验证。
我遇到的问题(与 Internet 上的许多其他问题一样)是范围继承。
这是我当前的代码看起来像
HTML
JS
基本上,value
$watch 函数内部是未定义的,所以很明显我没有正确执行此操作。
那么,如何将模型绑定到输入字段,同时让指令具有对同一对象的引用并能够获得watch
它的值?
html - Angular 应用程序在 transclude 上找不到控制器
我无法让我的控制器链接到我的视图。如果我使用 ng-view 包含视图并在路由中包含控制器名称,则当 Angular-route.js 尝试链接到 ngViewFillContentFactory 时,嵌入会失败。如果我在视图本身中使用 ng-controller 属性,它会在将控制器绑定到视图的 boundTranscludeFn 上的 angular.js 中失败。在这两种情况下,我都可以看到应用程序和“shell”控制器已加载到 DOM 中。在这两种情况下,错误消息“Argument 'shell' is not a function”。
ng-app 标记在 html 标记中设置为应用程序的名称。为什么应用程序找不到控制器?我错过了什么微小的细节?
这是错误消息(我在两个不同的 div 上调用控制器),这是加载到角度控制器集合中的控制器函数。
ng_app 属性在 html 标记中设置为“cockpit”,在这两种情况下,我现在都使用路由器将 shell 控制器分配给视图和包含 ng 的部分。如果我将 ng-attribute 标记分配给 shell.html 中的“shell”,也会发生同样的事情,只有错误发生在代码的另一部分。
我正在尝试组合一个测试应用程序来重现我可以在 git 上发布的问题。