问题标签 [angular-directive]

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.

0 投票
5 回答
49713 浏览

javascript - 什么是 AngularJS 指令?

我花了很多时间阅读 AngularJS 文档和一些教程,我对文档的难以接近程度感到非常惊讶。

我有一个简单的、可回答的问题,可能对其他想要学习 AngularJS 的人也有用:

什么是 AngularJS 指令?

在某个地方应该有一个简单、精确的指令定义,但是AngularJS 网站提供了这些令人惊讶的无用定义:

在主页上

指令是 AngularJS 中一个独特而强大的功能。指令让您发明新的 HTML 语法,特定于您的应用程序。

开发者文档中:

指令是一种教授 HTML 新技巧的方法。在 DOM 编译期间,指令与 HTML 匹配并执行。这允许指令注册行为,或转换 DOM。

还有一系列关于指令的讨论,具有讽刺意味的是,它们似乎假设观众已经理解它们是什么。

为了清晰的参考,任何人都可以提供一个指令的精确定义,它解释了:

  1. 它是什么(以 jQuery的明确定义为例)
  2. 它旨在解决哪些实际问题和情况
  3. 它体现了什么样的设计模式,或者说,它如何适应 AngularJS 的 MVC/ MVW使命。
0 投票
1 回答
9686 浏览

angularjs - 如何使用位于不同模块中的指令

那么为什么这行不通呢?并说 Unknown provider: $compileProvider,

但是如果我将指令移到myApp模块中它可以工作

0 投票
5 回答
7929 浏览

javascript - Angularjs form validation order

I have a simple html form containing regular text input. ng-minlength, ng-maxlength and ng-pattern angular built-in form input directives are set on the input.

Problem: ng-pattern check is applied before the length check by ng-minlength and ng-maxlength.

Question: how can I change the default check order: i.e. first check for the length, then apply pattern check?

Example:

Current behavior:

  • enter "#" - see "Pattern error"
  • enter "###" - see "Pattern error"

Desired behavior:

  • enter "#" - see "Length error"
  • enter "###" - see "Pattern error"

FYI, related jsfiddle.

Thanks in advance.

0 投票
1 回答
121 浏览

javascript - 在 angularjs 中搜索和过滤多个模型

我在这里创建了一个示例应用程序。我的应用程序在范围内有 2 个对象数组,名称为datadata2。我也有 2 个指令:

我有一个输入搜索,用于在模型中按名称搜索。但是我如何在一个输入中通过相同的查询搜索这两个模型

0 投票
1 回答
1174 浏览

javascript - ng-checked 时 ng-models 没有绑定

我有一个父复选框,当单击子复选框时会检查该复选框。我希望这个父复选框反过来与第三个复选框绑定。但是当更改是由于 ng-checked 导致的 2 方式绑定不起作用。这是模板:

这是 jsfiddle 中的工作示例:http: //jsfiddle.net/Alien_time/vy5UM/1/

换句话说,当通过单击选中父复选框时,ng-model 与第三个复选框绑定。但是,如果父复选框由于 ng-checked 而被选中,则第三个复选框不会更新更改。如何在 Angular 中实现这一点?

0 投票
2 回答
3781 浏览

angularjs - AngularJS 和 angular-translate:在对象文字中使用翻译过滤器

我有一个 Angular JS 应用程序,它为 i18n 使用 angular-translate。这个应用程序还使用 highcharts.js 显示图表。我在 highcharts-ng 之上构建了一个自定义指令,它允许我将对象文字作为表达式传递,然后用于配置图表的轴:

我使用这样的指令:

现在我想翻译我的应用程序。我注意到这显然行不通:

有没有办法在对象文字中使用翻译过滤器?如果没有,我应该如何在坚持角度架构的同时解决我的问题?

另请注意,我无法以中断传递包含其他非翻译字段的对象文字的方式更改指令的语义。

最小示例小提琴在这里:http: //jsfiddle.net/Ssn53

0 投票
1 回答
13710 浏览

javascript - 为 Angular 指令添加多个“要求”选项

通常在指令中,require: 'ngModel'如果我想将范围传递给它,我会使用它。这工作正常。但我现在正在创建一个指令,该指令创建 5 个不同的 HTML 元素,每个元素都具有从父级传递的不同 ngModel。需要作为属性传递的 ngmodel 是ngModel1, ngModel2, ngModel3, ngModel4, ngModel5. 如何require在指令内的条件中添加多个选项?

我尝试了这些,但它不起作用:

如何添加多个 require 选项?

编辑:

HTML 代码:

指示:

0 投票
1 回答
86 浏览

angularjs - AngularJS 选择指令可以有多个 null 选项吗?

我有带有 ng-options 的 Angular 选择指令。我也有一个空选项:

但我想在列表末尾有另一个 null 选项,因此结果列表将是:

  • 请选择公司...
  • 公司1
  • 公司2
  • 公司3
  • 公司4
  • 新公司...

我试过:

但是你可以猜到什么都没有发生,第二个 null 选项不会在任何地方显示。有没有一些 Angular 的方法来解决这个问题?我知道一种替代方法是使用 ng-repeating 选项元素而不是使用 ng-options。

0 投票
2 回答
180 浏览

javascript - Angular - $q 未按预期工作/帮助等待 $http 完成

我正在完成我的第一个 Angular 项目(rails gem 版本 1.2.16。)并且似乎无法弄清楚如何正确使用 $q。

我有一个指令,点击时: 1. 调用一个指令函数,该函数调用工厂函数来运行 $http 请求 2. 在附加到页面的模板中使用指令函数/ $http 的响应。

指示:

工厂:

HTML:

问题:在工厂函数返回响应之前加载模板。

我的解决方案:我在指令中创建了一个函数来调用工厂,并尝试使用 $q 在附加模板之前等待响应,但它似乎不起作用。

任何提示或线索将不胜感激,谢谢!

0 投票
2 回答
548 浏览

javascript - 创建动态模板并绑定内容角度

按照这些很棒的文章链接,我编写了自己的指令,以动态地为窗口创建模板,该模板必须以必须发送的数据的性质为特征,更清楚地说,我的应用程序必须发送文本输入,指令创建一个输入区域,而不是在必须发送布尔值的情况下创建一个复选框。
成功获得指令后,我发现绑定模板内容以将其发送回时存在问题。
我已经阅读了指令的文档,我找到了可能可以帮助我的 transclude 值,但是我的尝试没有成功,我编写了下面的代码,就像他们在我的应用程序中一样

HTML

HTML控制器页面的JS文件

指令的 JSfile

非常清楚的问题是 addNote 函数的警报打印什么也不打印或未定义,而不是像 inputArea 一样的模板的内容