问题标签 [angular-directive]

我正在尝试构建的是一个包含多个选择的 SPA，其中每个选择都有自己的模型。在选择框中选择不同的选项可能会显示/隐藏页面上的其他字段并修改其他选择的数据（加载不同的集合）。最后，两个选择中的选项可能会更改 url（因此当页面加载了正确的地址时，这两个选项将被预先选择）。现在我想知道这里最好的方法是什么。

第一的。在这种情况下是否值得切换到 ui-router ？

第二。我需要为此选择编写一个自定义指令，它将具有以下功能

1. 加载数据收集
2. 显示数据并记住选择
3. 当其他选择触发它时重新加载它的数据收集
4. 为其他选择重新加载数据

现在我以前写过指令，但从来没有这样（我认为）复杂的东西。这就是为什么我想到的问题很少。

如何将不同的数据绑定到我的指令？这应该只是一个庞大的复杂指令还是将其划分为更小的部分（例如一个用于显示关闭选择框的指令和另一个用于显示列表的指令等等）？如何在应该更改数据时触发事件并从另一个选择中侦听类似事件。通过控制器？

提前感谢您的所有帮助。

我有一个在 input=text 标签上使用的属性指令，如下所示：

在我的指令中，我尝试使用 ngModelController 来保存输入的初始值，在这种情况下，是与它关联的 ng-model 的值。

指令是这样的：

问题是 ngModel.$modelValue 是空的，可能是因为在初始化指令时 ngModel 尚未更新为正确的值。那么，如何在我的指令中存储在我的输入字段上设置的第一个值？

如何正确访问 ngModel.$modelValue 以使其具有正确的值？

我也会感谢解释为什么这不起作用，因为我通过阅读文档并没有清楚地理解这一点。

Plunkr 完整示例：http ://plnkr.co/edit/QgRieF

我想创建一个带有输入字段的范围滑块来直接输入值（如在 jQM 中：http ://demos.jquerymobile.com/1.4.4/slider/ ）。

我的指令如下所示：

好吧，当我更改数字输入的值时，这很有效。滑块移动并且值属性都被更新。只要我直接移动滑块，两个值属性都会更新，但我的数字输入文本会以某种方式被清除并设置为最小值。

我在模板中或数据绑定中犯了一些错误吗？

我需要创建将在网络应用程序中一遍又一遍地重复的通用“信息框”。
我需要 3 种不同类型的盒子，比如说 A、B 和 C。
它们的模板将非常相似，所以我想创建一个“通用盒子”，然后根据我是否需要指令以某种方式使其更具体A、B 或 C。

我们以下图为例：

标记为绿色的空格可能存在也可能不存在，具体取决于我们使用的指令，当然它们的内容和行为应该相应地改变。

如您所见，主指令只是一个带有一些基本重复信息的矩形，例如左侧的图像、标题和内容区域。

有没有办法以角度创建通用指令（如主矩形），然后使用某种继承来创建“子指令”？

如果是，是否可以只使用主指令并传递一个参数让 Angular 了解它是否应该从中创建指令 A、B 或 C？就像是

这种技术的可能缺点是什么？我希望我很清楚

我正在尝试结合ui-sortable和angular-gridster的功能，以便我可以从列表中拉出一个项目并将其放入可重新排列的网格中。ui-sortable 和 angular-gridster 具有相同的 DOM 结构：

和属性允许它们附加到适当的 DOM 元素。我认为这将是一项非常简单的任务，但是我无法让他们一起工作。

我创建了这个CodePen，您可以在其中从 ui-sortable 的“Ingredents”列表拖到“My Coffee”列表中。拖入“我的咖啡”也会更新 angular-gridster“咖啡网格”，因为“我的咖啡”和“咖啡网格”使用相同的模型。我想做的是直接从“成分”拖到“咖啡网格”中。

我看到的主要区别是，在设置之后，Gridster 的 DOM 看起来像这样：

ui-sortable 看起来像这样：

所以 angular-gridster 正在添加一个<div ng-trasclude>，让我认为 ui-sortable 可能无法附加到 DOM 元素，因为那个意外的 div 在那里。

我还在本地逐步浏览了 ui-sortable 源，并确定它的更新方法永远不会被调用。成功的拖放将调用以下方法：

试图拖入 angular-gridster 看起来像这样：

但是，我无法确定为什么从未调用 update 并且没有引发错误。

我意识到这是一个非常具体的问题，我希望有人可能遇到过同样的问题，或者愿意帮助我进行一些调试。提前致谢！

仍然用 angular 找到我的方式，我在 ".directive('y',[y,function(y){" 行上得到 "Uncaught ReferenceError: y is not defined" 。就像它没有加载服务一样.我还尝试将脚本从主体移到头部，但没有任何效果。

我的html是

我有一个名为 的指令step-field，在指令的模板中我有输入或选择元素，有时应该有 max-length 或 ng-required 或一些自定义指令，如validate-username.

步骤字段如下所示：

我想在这个指令中添加“validate-username”和“required=true”，所以它看起来像这样

在指令模板的内部，我想要验证用户名并要求将其传递给输入字段。（顺便说一句 $scope.isRequired = attrs.required）

如何将我传递给步骤字段的一些指令应用到模板中的输入字段？

谢谢！

基本上，我有两个指令：

和一个控制器

哪里Map是$resource获取 JSON 文件的实现。

我的问题是指令功能在控制器调用之前执行。也就是说，我mapData在指令中调用了几个属性，它们都在控制台中返回 undefined 并带有相应的错误消息。但是，在错误打印输出后不久，从$resource实现中获取的数据会执行并打印到控制台。

请注意，如果我替换$promiseand 仅依赖于

然后我在指令中$scope.mapData可见，但不是.<donut-chart><ng-map>

鉴于这种结构，我如何才能将指令功能延迟到控制器加载数据之后？

本质上，我希望能够访问我创建的指令的父范围，但我也希望能够访问我放置在元素上的属性。

例如相关的js

索引.html

指令.html

输出是“Hello”而不是“Hello Henry”

所以只是为了澄清，我想做的就是访问属性和父范围。

我的问题非常简单明了。在我的console.log应用程序上被评估了 50 次，而这里只有 2 次。

到底是怎么回事？

我认为它与循环有关，如果不相关的话$digest()，但一个更有启发性的答案会很好。