与ng attr myCustomAttribute匹配的自定义属性指令

Custom Attribute Directive being matched to ng-attr-myCustomAttribute

本文关键字：自定义属性 指令 ng attr myCustomAttribute      更新时间：2023-09-26

我正在使用具有以下自定义属性指令的第三方lib：

angular.directive('snapDrawer', function () {
'use strict';
return {
  restrict: 'AE',
    ...

因此，如果在HTML元素中找到属性"snap drawer"，则指令实现会匹配并触发，例如：

<div snap-drawer></div>

我使用的是Angular 1.3，它对ng attr有一种"AllOrNothing"方法，如果条件值未定义，则属性不会呈现为这样：

<div ng-attr-snap-drawer="{{data.addSnapDrawer}}"></div>

100%事实上，这是有效的，我的控制器中data.addSnapDrawer的值未定义，并且快照抽屉属性不会在DOM中呈现

我已经验证了Angular 1.3在这里使用ng-attr执行AllOrNothing方法：在Angular中有条件地应用属性的最佳方式是什么？（看看Mathew Foscarini的回答）

但是在DOM中呈现的是：

<div ng-attr-snap-drawer="{{data.addSnapDrawer}}" class="snap-drawer snap-drawer-left" style=""></div>

因此，令人难以置信的是，angular.指令（"snapDrawer"）与"ng attr snap drawer"匹配。这怎么可能呢，我真的很震惊AngularJS，在它辉煌的时候，却有这样的bug。

我在网上找不到任何东西。我不能设置snap drawer="false"我需要它不出现在DOM中，这是我通过从Angular 1.2升级到1.3实现的。

这很古老，但我偶然发现了一些非常相似的东西。https://github.com/angular/angular.js/issues/16441-棱角分明的作者就是这样做的。

您需要设计一种不同的方式（取决于您的用例）来有条件地应用指令（例如，使用ng开关并有两个版本的HTML；一个有指令，另一个没有，或者有一个具有高优先级的终端指令，该指令在链接阶段评估表达式，应用必要的指令并编译元素）。

相关文章：