Custom Attribute Directive being matched to ng-attr-myCustomAttribute

Question

I am using a third party lib with the following custom attribute directive:

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

So if the attribute "snap-drawer" is found in an HTML element the directive implementation has a match and fires, for example:

<div snap-drawer></div>

I am using Angular 1.3 which has an "AllOrNothing" approach to ng-attr where if the value conditional is undefined then the attribute does not render like so:

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

100% fact this works, the value of data.addSnapDrawer in my controller is undefined and the snap-drawer attr does not render in the DOM

I have verified that Angular 1.3 does this AllOrNothing approach with ng-attr here: What is the best way to conditionally apply attributes in Angular? (take a look at Mathew Foscarini's answer)

BUT what does render in the DOM is:

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

So, unbelievably, the angular.directive('snapDrawer') is matching to "ng-attr-snap-drawer". How can this be, I am really shocked that AngularJS, in all its glory, has a bug like this.

I cannot find anything online. I cannot set snap-drawer="false" I need it to not appear in the DOM, which I achieved by upgrading from Angular 1.2 to 1.3.

Answer 1

This is old, but I stumbled upon something very similar. https://github.com/angular/angular.js/issues/16441 - angular authors made it this way.

You need to devise a different way (depending on your usecase) to conditionally apply directives (eg use ng-switch and have two versions of the HTML; one with the directive and one without, or have a terminal directive with high priority that evaluates the expression during the linking phase, applies the necessary directive(s) and compiles the element).