问题标签 [angularjs-ng-transclude]

我想在执行 $http 请求时制作一个显示微调器的指令。

我认为这会起作用（例如加载用户）：

主控制器

使用指令的模板

请求加载directive.js

请求加载模板.html

你能帮忙的话，我会很高兴！谢谢。

我在视图上有一个带有切换组件的指令。切换组件的配置非常简单：

该指令工作正常，但如果该指令被加载到另一个指令中，则切换组件不再工作。:(

你们能帮帮我吗？非常感谢。

I want to access the scope of a transcluded element the VERY first time it is inserted in the tag in a directive with isolated scope. I have access to the clones of the transcluded element using the transclude function, but not for the very first time the element is inserted.

I have the following HTML

I have two directives. I want to transclude the contents of my-directive and be able to access a variable called "myDivName" from the scope created for the transcluded element. That variable gets its contents from the variable "theName" in the isolated scope of the "my-directive" directive.

This is my Javascript code:

As you can see I use the transclude parameter of the link function in "my-directive" directive to set the right value for the variable "myDivName" in the transcluded scope. However that code only executes AFTER Javascript has replaced the contents in the tag in "my-directive" and allows me to append as man clones of the transcluded contents as I want (I have access to their scopes so there's no problem).

HTML of the Output

The problem is the contents inserted the very first time in the tag in "my-directive". How do I access the scope of that very first transcluded clone?

There's an "easy way" of doing it, and it is to expose the variable of the isolated scope of "my-directive" like this post suggests ngModel needs $parent when within Transcluded html , but I don't want to crowd the parent scope of "my-directive" with such variables.

我正在尝试使以下代码工作（angular 1.4.3，jquery 2.1.4，chrome 45）：

指令的模板 (row.tmpl)：

所以我们的想法是我们将用 <section> 部分替换行。此外，我希望将 .rows-placeholder 替换为 mec-row 内的任何内容。所有这一切都使用以下指令：

这并没有给我预期的结果（只放入数组中的最后一项）：

最后我想摆脱单元格标签并简单地用一个div替换它。如果我将这段代码添加到链接函数中：

……结果只会更加痛苦。控制台错误：

但是，现在只解析数组中的第一项。

我不太确定发生了什么，以及如何解决这个问题。希望你能帮忙。

我无法让嵌入的内容在我的自定义指令中正确呈现。

以下是示例：

http://plnkr.co/edit/mvx5GuMrPcUPJbrOCKbD

来自外部源的内容具有换行符 ( \n) 字符，我想使用过滤器将换行符替换为<br>HTML 标记。

如果我在单个元素上使用 ng-bind-html，这似乎可以正常工作，但如果我有一个包含嵌入内容的自定义指令，它似乎会忽略 $sce.trustAsHtml()，并转义 HTML 内容：

我怎样才能让我的指令正确地嵌入这个 HTML 内容？

注意：这似乎与 AngularJS 表达式 + ngTransclude 的 $sce 功能有关，因为原始/静态 HTML 内容适用于 transclude：

将事件处理程序添加到嵌入内容的正确方法是什么？我不希望我的指令的使用者将他们自己的点击处理程序添加到文档中。该指令应该处理它。但是我不确定如何正确地将处理程序添加到使用 ng-transclude 传递的内容中。

摆弄：https : //jsfiddle.net/hoe71p0e/12/（无法让 Angular.js 和 JSFiddle 工作；我的链接函数没有被调用）

foo.html

foo.js

预期结果（点击按钮应该调用 foo）

实际结果（点击按钮什么都不做）

请注意，data-ng-click按钮上的属性丢失了。

另外，我见过几个这样的例子......

破碎的.js

...但是那些失败是因为.find()没有返回结果，即使检查员似乎认为克隆包含一个“按钮”。

我正在使用controller as语法。在这个范围内，我有一个指令，它包含访问这个控制器的内容。该控制器似乎无法从 ng-transclude 中访问。

演示：http ://plnkr.co/edit/ZYPCym2WQV43wh4R4nwI?p=preview

在嵌入的内容中使用控制器是否有限制？

我正在基于此示例以角度实现可重用的分步向导指令。它工作得很好，但就像在示例中一样，我正在使用 ng-show 隐藏除当前步骤之外的所有步骤。每当我更改同时显示当前和下一步的步骤时，这都会导致快速闪烁。我想不通的是如何消除闪烁并确保在任何时候只显示一个步骤。

我尝试过的： 我自己解决此问题的最初尝试是将显示/隐藏机制更改为使用 ng-switch，但由于 ng-switch-when 指令仅接受字符串，因此效果不佳（所以我可以'不要用索引自动填充它）。此外，ng-switch-when 通过 translcusion 工作，这意味着我将在单个元素上有 2 个嵌入指令，这实际上没有意义。

我目前实现的向导指令如下所示：

对应的向导模板如下所示：

I already know how transclusion works ( within first level only I guess) , bUt I have a question about nested transcluded item's scope.

Ok so I have this code :

Basically I have a controller , <my-tabs> and <my-pane >.

Looking at myTabs directive :

I know that the content of the directive will have access to the outer directive's scope

So the yellow part will have access to the outer scope ( which is the main controller scope) :

Here is the code for myPane directive :

The program starts with :

The output of the program is :

Hello , The value of "i" is => 1000

But

According to the documentation : myPane's transcluded data should have access to the outer scope of the directive which is myTabs directive which has the value i=2.

But myPane has an isolated scope so it does NOT inherit the scope from myTabs.

Question

So does it goes one level more higher to the controller's scope in order to get i=1000 ?? _{(Clarification , I'm not asking how can I make i get another value - I'm asking why/how it has the value of 1000).}

I mean how does the hierarchy of scope looks here?

Is it like this?

the docs says :

The transclude option changes the way scopes are nested. It makes it so that the contents of a transcluded directive have whatever scope is outside the directive, rather than whatever scope is on the inside. In doing so, it gives the contents access to the outside scope.

But what scope does the outside of myPAne directive has ?

In other words , why/how does i=1000?

FULL PLUNKER

EDIT FROM OP AFTER ANSWER

After installing and configuring PeriScope ( from @MarkRajcok) I can now see it visually :

我正在尝试从包含子指令的链接函数访问父指令的控制器方法，但没有运气。当我将孩子作为父母模板的一部分或从父母 ng-controller 传入时，它会起作用。不应该在 Angular 1.4 中创建子范围吗？

Javascript：

HTML：

JSBin