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

【问题标题】：Custom Attribute Directive being matched to ng-attr-myCustomAttribute与 ng-attr-myCustomAttribute 匹配的自定义属性指令
【发布时间】：2015-03-31 07:03:53
【问题描述】：

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

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 的值是未定义的，并且 snap-drawer 属性不会在 DOM 中呈现

我已经验证 Angular 1.3 在这里使用 ng-attr 执行 AllOrNothing 方法：What is the best way to conditionally apply attributes in Angular?（看看 Mathew Foscarini 的回答）

但是在 DOM 中呈现的是：

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

因此，令人难以置信的是，angular.directive('snapDrawer') 与“ng-attr-snap-drawer”匹配。怎么会这样，我真的很震惊 AngularJS 在它的所有荣耀中都有这样的错误。

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

【问题讨论】：

创建新自定义属性时的一般规则是不要使用前缀 ng 命名它，因为 angularjs 的更高版本可能具有相同的名称。
这就是这个问题如此令人困惑的地方，我的自定义属性名为“snapDrawer”，没有 ng 前缀，请参阅我的问题中的 angular.directive。 Angular 匹配“ng-attr-snap-drawer”的“snap-drawer”部分，并且“ng-attr-snap-drawer”有条件地用于渲染“snap-drawer”属性
你能不能在 snap-drawer 前面加上一些其他的自定义词，比如 Brian-snap-drawer。
不，snap-drawer 是第三方库的一部分，所以我想避免在更新该库时会破坏的更改。 snap-drawer 必须是自定义属性名称，谢谢
“所以，令人难以置信的是，angular.directive('snapDrawer') 与“ng-attr-snap-drawer”匹配。这怎么可能，我真的很震惊 AngularJS，在它的所有荣耀中，都有一个像这样的错误。” 这不正是documentation says it should do 的内容吗？（虽然我在查找与版本相关的文档时遇到问题）

标签： javascript angularjs

【解决方案1】：

这是旧的，但我偶然发现了一些非常相似的东西。 https://github.com/angular/angular.js/issues/16441 - Angular 作者是这样设计的。

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

【讨论】：