问题标签 [angularjs-compile]

我有这样的东西-

如何将我的自定义指令作为属性添加到页面上现有的 html 元素中，比如说 - 指令为categoryLookup-

我需要在页面加载时动态执行此操作，即使输入文本按照指令逻辑运行。

提前致谢。

我在 Angular 中做这样的事情。
编译后，对象将无法正确传递给 DirectiveB。
但是，如果我传递了作用域中定义的对象，那就没问题了。
我想知道为什么会发生这种情况以及如何以简单的方式将对象（不在范围内）传递给带有已编译 html 字符串的指令？我使用闭包来做到这一点，但它不容易维护。

在 DirectiveA.js 中：

在 DirectiveB.js 中：

JS BIN： http: //jsbin.com/depohoqofi/edit ?html,js,console,output

我正在尝试动态创建指令，实际上我做到了，但接缝非常糟糕。

这是我的第一种方法：

它不起作用，因为您无法在应用程序启动后注册指令。

基于这篇文章：http ://weblogs.thinktecture.com/pawel/2014/07/angularjs-dynamic-directives.html

我发现我可以使用 compileProvider 来完成这项工作，但是由于 compileProvider 在 config 块之外不可用，你需要把它拿出来，所以我做了：

令人惊讶的是它奏效了。但是我不想破解compileProvider ，因为我没有按照预期的方式使用它，我真的很想知道在应用程序启动后是否可以正确使用compileProvider。

当我在属性中传递模板并对其进行编译以将其渲染时， $compile 工作正常ng-href="expression"，但未编译表达式的地方除外。

这是在编译函数中完成的，而在链接函数中为时已晚？

顺便说一句，我将模板范围链接到它的父级。如何找到最接近的范围是控制器范围。

$parent可能并非在所有情况下都属于控制器范围。

我正在尝试扩展 angular-ui.github.io/bootstrap/datepicker，但它似乎不起作用。

我不断收到此错误“TypeError：scope.monthChanged 不是函数”我已经调整了来自Angular - ui-bootstrap - datepicker 的代码 - 有没有办法检测月份何时更改？

HTML是：

试试这个插件：http ://plnkr.co/edit/sXuAkUz0l9XdtdUb457V?p=preview 如果检查代码，当我将内联日历更改为下个月时，会出现以下错误代码： TypeError: scope.monthChanged is not a功能——</p>

我已经知道每个项目的目的是什么：compilevs link(pre/post)vscontroller

所以假设我有这个简单的代码：

HTML

Controller

Directive

正如我们所看到的，我修改了模板（在compile函数处 - 它实际上应该在哪里）

结果（plnker）：

但

不知道template:...还能带函数。

所以我可以改用这个template函数（plunker）：

问题

如果是这样 - 我应该什么时候使用template函数 vscompile函数？

我想创建一个可以在<select>元素上使用的指令，告诉它<select>使用一个全球已知的列表来填充，该列表在应用程序中的所有组件之间动态更新和共享。

我设想像这样使用它：

到目前为止，这是我的工作方式：

也就是说，我ng-options根据为此目的设置的范围分配了一个执行我想要的属性，然后$compile是它。

这很好用。但请注意我用ATTENTION注释的行：这假定用户使用<select select-the-list>了 ，然后将其标准化selectTheList并使用了该指令。但是，根据指令文档：

Angular对元素的标签和属性名称进行规范化，以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰式 规范化名称（例如ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们在 DOM 中以小写形式引用指令，通常在 DOM 元素上使用破折号分隔的属性（例如ng-model）。

规范化过程如下： [... snip ...]

例如，以下形式都是等效的并且与ngBind指令匹配：

也就是说，如果用户这样做<select select:the:list>，那么该指令将被应用，element.removeAttr('select-the-list')将不起作用，并且我将得到一个无限循环。

这可能是一个XY 问题，这就是我提供所有这些上下文的原因。但是，如果这是一个好方法 - 在元素上找到导致我的指令被调用的实际属性的最佳方法是什么，所以我可以在重新编译之前将其删除？

我一直在尝试使用递归指令进行动态 html 字符串解析，该指令有效，但双向绑定似乎不起作用。这里需要一点帮助。下面是 plunker： http ://plnkr.co/edit/ovz2RJDmnHPgLUqUaH7M 这里是代码：

我正面临 $compile 的一个问题。我编写的代码非常大，因此我创建了一个小示例来复制此问题。假设我的页面中有一个按钮。当用户单击该按钮时，将创建另一个按钮，该按钮将具有 ng-click 方法，如下所示：

HTML：<button type="button" ng-click="createExample()">test</button>

当用户单击按钮时，将调用 createExample() 方法。此方法将创建另一个具有 ng-click 的按钮。这个 ng-clicks 包含一个发出警报的方法。

我在下面收到错误：

$compile 是我唯一的选择。如何使这项工作？

JSFiddle在这里

我的应用程序中有一项modal服务可以打开/关闭模式。当模式打开时，它会从具有指定 id 的 div 中提取它，该 id 始终位于隐藏content的容器内。elem通常这工作正常。

我现在遇到的问题是，当用户mediaBrowser第一次使用指令打开模式时，他们可以在照片/视频选项卡之间导航并选择要附加到帖子的项目。如果模式关闭并重新打开，则没有任何效果。照片按预期加载，但单击一张没有任何作用。就好像mediaBrowserormediaBrowserPhotos指令中的任何功能都不起作用。

我认为它可能与compile从一个 DOM 元素移动到另一个 DOM 元素后需要指令有关，但我没有太多运气通过$compile服务解决它。

这是我的modal服务：

我的应用程序中还有一个mediaBrowser指令，其中包含 2 个代表照片和视频选项卡的子指令。这是我的mediaBrowser指令：

这是该mediaBrowser指令的部分内容：

这是我的mediaBrowserPhotos指令。请注意，视频版本与照片基本相同：

这是部分的mediaBrowserPhotos：

整个应用程序本身非常复杂，很难在 Plucker/Fiddle 中重现。任何帮助将不胜感激。让我知道您需要应用程序中的任何其他代码！