当前位置: 首页 > 面试题库 >

当replace = true时如何防止角度指令中的属性重复

陶永望
2023-03-14
问题内容

我发现指定的角度指令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编译器的函数中看到此行为。

由于您无法更改该行为,因此可以使用指令定义的compilelink属性来控制属性及其值。在编译阶段而不是在链接阶段进行属性操作对您来说更有意义,因为您希望这些属性在任何链接函数运行时都“准备就绪”。

您可以执行以下操作:

.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,可以在任何组件或元素上工作。

  • 问题内容: 根据API文档,伪指令的属性已弃用,因此将来,所有伪指令的行为都将使用当前默认值。 这消除了开发人员替换element指令的element的能力,而没有明显替代此功能的能力。 有关如何使用元素指令和不使用元素指令的示例,请参见此示例。 为什么不推荐使用此有用的属性而不进行替换? 问题答案: 在下一个主要的Angular版本中,将删除用于定义替换其所在元素的指令的标志。此功能具有难以理解

  • 问题内容: 如何在指令中设置插值?我可以从以下代码中读取正确的值,但无法设置它。 js: HTML: 我的控制器范围内的值在哪里? 问题答案: 如果要在范围上设置值,但不知道属性名称(提前),则可以使用以下语法: 如果属性中的字符串包含点(例如),则将无法使用;您可以用来做作业: 如果使用隔离范围,则可以使用批注: 您可以在此Angular /jQuery颜色选择器JSFiddle示例中看到一个示