我发现指定的角度指令replace: true
会将指令用法中的属性复制到模板呈现的输出中。如果模板包含相同的属性,则模板属性值和指令属性值将在最终输出中组合在一起。
指令用法:
<foo bar="one" baz="two"></foo>
指示:
.directive('foo', function() {
return {
restrict: 'E',
replace: true,
template: '<div bar="{{bar}}" baz="baz"></div>',
scope: {
bar: '@'
},
link: function(scope, element, attrs, parentCtrl) {
scope.bar = scope.bar || 'bar';
}
};
})
输出:
<div bar="one " baz="two baz" class="ng-isolate-scope"></div>
中的空格bar="one "
和中的多个值一样会引起问题baz
。有没有办法改变这种行为?我意识到我可以在指令中使用非冲突属性,并在输出中同时包含模板属性和非冲突属性。但我希望能够使用相同的属性名称,并更好地控制模板的输出。
我想我可以使用link
方法与element.removeAttr()
和element.attr()
。似乎应该有一个更好的解决方案。
最后,我意识到有人在谈论过时remove: true
,但是有保留的理由。就我而言,我需要它使用伪指令生成SVG标签的指令。详情请看这里:https
:
//github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb
不,没有什么好的声明方式可以告诉Angular在将x
属性移植到模板时应如何合并或操纵属性。
Angular实际上将属性从源直接复制到目标元素(有一些例外),并合并属性值。您可以mergeTemplateAttributes
在Angular编译器的函数中看到此行为。
由于您无法更改该行为,因此可以使用指令定义的compile
或link
属性来控制属性及其值。在编译阶段而不是在链接阶段进行属性操作对您来说更有意义,因为您希望这些属性在任何链接函数运行时都“准备就绪”。
您可以执行以下操作:
.directive('foo', function() {
return {
// ..
compile: compile
// ..
};
function compile(tElement, tAttrs) {
// destination element you want to manipulate attrs on
var destEl = tElement.find(...);
angular.forEach(tAttrs, function (value, key) {
manipulateAttr(tElement, destEl, key);
})
var postLinkFn = function(scope, element, attrs) {
// your link function
// ...
}
return postLinkFn;
}
function manipulateAttr(src, dest, attrName) {
// do your manipulation
// ...
}
})
问题内容: 我是一个团队的成员,该团队有大约6个UI开发人员,质量各异,几乎没有Angular经验。许多是承包商,几乎没有代码库经验。该应用程序具有非常漂亮的(复杂的)UI。它支持IE8 +(希望很快会成为IE9 +)。 我们正在为应用程序的主要扩展引入Angular,并且有人要求我为团队编写有关使用Angular的准则。 我们将使用指令来创建精美的UI元素,所有元素均以“ ipwr”为前缀,以避
问题内容: 我正在用来创建用户并处理身份验证。 当我尝试通过方法通过简单登录创建新用户时,如果已经使用了电子邮件地址,firebase不会创建该用户。但是,在创建用户并将其用作密钥之后,我还用于将创建的用户保存到我的Firebase中。尝试写入数据库时,即使用户名不是唯一的,firebase也会保存记录,因为简单登录只需要电子邮件和密码。因此,当用户名不用作用户对象的密钥时,如何验证其唯一性?
问题内容: 在我中,我使用或下载档案的最新版本,例如: 使用或创建自己的图像层的语句。它将用作以后执行的缓存。 问题 :如何禁用该指令的缓存? 让类似 缓存失效的 东西在那里工作会很棒。例如,通过使用HTTP ETag 或查询 最后修改的 标头字段。这样就可以根据HTTP标头进行快速检查,以决定是否可以使用缓存的层。 我知道一些肮脏的技巧可以帮助例如在语句中执行下载Shell脚本。在我们的构建系统
例如,Angular 2内置的属性指令ngClass和ngStyle,可以在任何组件或元素上工作。
问题内容: 如何在指令中设置插值?我可以从以下代码中读取正确的值,但无法设置它。 js: HTML: 我的控制器范围内的值在哪里? 问题答案: 如果要在范围上设置值,但不知道属性名称(提前),则可以使用以下语法: 如果属性中的字符串包含点(例如),则将无法使用;您可以用来做作业: 如果使用隔离范围,则可以使用批注: 您可以在此Angular /jQuery颜色选择器JSFiddle示例中看到一个示
问题内容: 根据API文档,伪指令的属性已弃用,因此将来,所有伪指令的行为都将使用当前默认值。 这消除了开发人员替换element指令的element的能力,而没有明显替代此功能的能力。 有关如何使用元素指令和不使用元素指令的示例,请参见此示例。 为什么不推荐使用此有用的属性而不进行替换? 问题答案: 在下一个主要的Angular版本中,将删除用于定义替换其所在元素的指令的标志。此功能具有难以理解