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

Question

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

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 attr 不会在 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 实现的。

Answer 1

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

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