问题标签 [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：使用 transclude 更改与指令关联的元素
如何更改与调用关联的元素transclude()？
在我的应用程序中，我从服务器动态加载整个 SVG 文件并显示它。我需要向加载的内容添加行为。
目前，我有这样的事情：
这会在 div 中加载一个 SVG 标签。这很好用，但是如果我想向 every <path>、<circle>等添加 ng-click 怎么办？ng-click已经在 svg 路径上开箱即用，这只是以某种方式引用元素的问题。
我已经可以使用 transclude 创建一个指令，该指令将为每个路径运行一次：
但是在 svg-each-path 内部，虽然我对每个元素都有一个单独的范围，el但指令的参数是没有意义的。或者它仍然指向父 div 或其他东西。
我想这样做：
这是svg-each-path目前的样子：
angularjs - Angular：使用模板或模板Url时的区别
template使用属性而不是属性时，我遇到了一个奇怪的问题templateUrl。
在后者的情况下，我可以定义多个具有隔离范围的指令或transclude单个元素上的选项。这按预期工作，我没有收到任何错误。
然而，当简单地复制模板并将其设置到template指令中时，Angular 突然开始抱怨多个指令请求隔离范围或对同一元素的嵌入。
看看我的这个笨蛋。它在控制台中引发错误。但是，如果您要替换（在 scripts.js 中）
和
该指令有效（尝试右键单击文本）。HTML 文件的内容与字符串中的内容完全相同。
有没有人知道为什么会发生这种不一致？
编辑：为避免混淆，我需要有 transclude 选项，因为我想重用这个元素并能够配置在每个单独使用的地方显示哪些元素。
angularjs - 表格的角度指令：使用 ng-bind-html 绑定嵌入元素
我正在尝试编写这样的通用表指令：
这将生成以下html：
我的 h 表模板类似于：
所以我需要创建两个指令：h-table 和 h-column。h-table 指令使用指令控制器，两个指令都将使用该控制器。h-column 指令将使用此控制器将列添加到表中并获取行/列的值。
到目前为止，这是我的指令的控制器：
我的 h-column 指令接收 h-table 的控制器。它使用 transclude 获取它的内容并将此内容保存在 col 对象中，以在之后绑定它：
最后 :) 我的 h-table 指令：
我需要将 h 列的内容放在 td 标记内。因此，我调用 getContentOrValueFor 函数来获取 h-column 指令中的内容。
如果没有内容，那么我就绑定该字段的值。
如果 h 列的内容类似于 {{1+2+3}}（它会显示 6，没关系），它可以正常工作。
但是如果这个内容是一个 html 标签，比如：
我收到错误“html.indexOf 不是函数”
我怎样才能做到这一点？
javascript - AngularJS：如何创建一个包含属性指令并可以添加新的元素指令？
我已经在这个问题上工作了两天了。我觉得它应该简单得多。
问题描述
我想创建一个如下使用的指令：
并作为输出：
自然它会有一个链接函数和控制器来做一些工作，但主要关注的是：
- DOM 元素保留原始名称，以便可以应用直观的 css 样式，
- 已经存在的属性指令继续正常工作，并且
- 新的属性指令可以由元素指令本身添加。
例子
例如，假设我想创建一个在单击它时在内部执行某些操作的元素：
它可以编译成这样的：
whereinternalFn将在clickCount指令的内部范围内定义。
试图
我的尝试之一是这个 Plunker：http ://plnkr.co/edit/j9sUUS?p=preview
由于 Plunker 似乎已关闭，因此代码如下：
这是使用该指令的一些 HTML：
并且因为元素保留了它的名字，所以 css 可以按如下方式使用：
我对它可能出现的问题有几个想法，但我尝试了许多替代方法。如果我在链接器中弄乱了，也许再试$compile一次，控制器函数也必须调用两次。无论如何，将不胜感激如何正确执行此操作的示例。
angularjs - AngularJS：子输入指令需要在其父级范围内编译，以便 ng-model 绑定
我们有一个在许多应用程序中使用的联系表。有许多重复的默认值、验证规则、结构等。我们正在研究一组指令，以使视图更加语义化且不那么冗长。
我们正在瞄准几个目标。
在父指令中定义一次联系表单模型，如下所示
<div my-form model='formModel'>：关联的子指令将能够从model属性中获取基本模型。为每个输入提供默认配置（大小、验证规则、占位符、类等），但允许在必要时覆盖属性。因此，我们使用
my-form指令的控制器创建子指令进行通信。我们还希望这些子指令绑定到应用程序控制器的模型formModel。
我在实现这一点时遇到了一些麻烦。
formModel通过父指令的控制器公开，但我必须在函数中手动$compile使用子指令。这对我来说似乎很臭，但如果我尝试使用子指令的范围，编译的 HTML 包含正确的属性（它在源代码中可见），但它没有绑定到控制器，并且它不会出现在任何范围内与 Batarang 一起检查。我猜我添加属性太晚了，但不确定如何更早添加属性。scope.$parentlink虽然我可以
ng-model在每个子指令上使用，但这正是我想要避免的。我希望结果视图非常干净，并且必须在每个字段上指定模型名称是重复且容易出错的。我还能如何解决这个问题？
这是一个jsfiddle，它具有我想要完成的工作但“臭”的设置。
angularjs - AngularJS : Passing attribute value from one directive to transcluded one
I have a situation where I have to create a container directive with some bells and whistles.. and then I have a list of directives that can be wrapped into that container directive.
Something like this:
Is there any way in which I can make <some-directive> and <some-other-directive> aware of the foo and/or bar attributes values of the directive they are transcluded in?
Basic theContainer directive
Let's presume that these two directives have different and unrelated function all together
someDirective
someOtherDirective
angularjs - ng-if 在嵌入作用域中破坏作用域继承
那个小提琴说明了这个问题http://jsfiddle.net/LAqeX/2/
我想创建一个指令来包装页面的一部分并将其隐藏。我想使用 ng-if 来删除不必要的绑定。但是会发生一些黑魔法。
这是我更喜欢的指令代码。
它应该创建两个范围：
- 具有两个变量的指令隔离范围 - 标题和可见
- 原型继承自“常规”作用域树的嵌入作用域。
但是，ng-if 使 transcluded 范围与现实有些脱离，并且 transcluded 范围不继承自控制器。请看小提琴，它非常清楚地说明了这个问题。
任何想法那里发生了什么以及如何解决它？
更新
看来我已经找到了作用域链看起来损坏的原因。ng-if 创建的作用域属于 withIf 指令的isolate 分支。所以它永远不知道控制器的范围甚至存在。但问题仍然是一样的——在这种情况下如何使用 ng-if。
angularjs - 在嵌入的、隔离的指令中为无线电输入设置默认值
好的，我知道标题听起来有点复杂。我将尝试解释我正在尝试的内容：
我有一个模态对话框指令（基于本教程，它使用嵌入来包装我想在对话框中显示的内容：
我在我的视图中调用该指令，如下所示：
这showSaveDialog只是控制器范围上的一个属性，true当我想显示对话框时设置为。
问题
除了我想让单选按钮默认为 "public"之外，这一切都很好。
由于单选按钮绑定ng-model到isPublic属性，我不知道如何指定isPublic = true模式何时显示。
在嵌入的范围内，该isPublic属性最初并不存在。因此，这两个单选按钮都未选中。仅在选中其中一个单选按钮后才会创建该属性。
尝试的解决方案
我试图关注，但无济于事：
ng-init在嵌入的 HTML 中使用来设置isPublic = true. 奇怪的是，我可以看到嵌入范围确实isPublic设置为true，但单选按钮都未选中。这可能是由于编译并将范围链接到模板时发生的事情的顺序。除此之外，使用ng-init.- 将
isPublic属性设置true为控制器的范围。这不起作用，即使我将其作为对象属性进行，即（在控制器上）$scope.model.isPublic = true然后设置单选按钮ng-model=model.isPublic。 - 在我想要的输入上使用 HTML
checked属性作为默认值。似乎它被 Angular 覆盖或忽略，以支持数据绑定模型。
我怀疑问题可能是我以错误的方式处理这个问题。但是指令的其余部分工作得很好，所以我希望有人能帮我找到我想做的解决方案！
string - YAML 引用另一个文件中的另一个变量
假设我有 2 个 YAML 文件：
1）应用程序.yml
2) 用户.yml
起初我认为我可能会使用引用：
1）应用程序.yml
2) 用户.yml
但事实证明，只有在一个文件中声明的项目才有可能。有什么方法可以从 application.yml 中定义的变量中获取值？