AngularJS directive for `autocomplete=off` (that works.. so far)

gistfile1.txt

angular.module('dont_fill', [])

// cross-browser trick to prevent input being auto-filled
// where autocomplete=off don't work as intended a lot of time
.directive('dontFill', function() {

  return {

    restrict: 'A',

    link: function link(scope, el, attrs) {
      // password fields need one of the same type above it (firefox)
      var type = el.attr('type') || 'text';
      // chrome tries to act smart by guessing on the name.. so replicate a shadow name
      var name = el.attr('name') || '';
      var shadowName = name + '_shadow';
      // trick the browsers to fill this innocent silhouette
      var shadowEl = angular.element('<input type="' + type + '" name="' + shadowName + '" style="display: none">');

      // insert before
      el.parent()[0].insertBefore(shadowEl[0], el[0]);
    }

  };

})

;

Use autocomplete="false" in ng-form to desibled auto complete

this is the cure thanks so much

Use autocomplete="false" in ng-form to desibled auto complete

doesn't work on 2021)

@kennyki
it will be better to add $interpolate(el.attr('name') || '')(scope) if any input field hast dynamic naming:

my ES6 version:

'use strict';

/**
 * @class DontFill
 *
 * cross-browser trick to prevent input being auto-filled
 * where autocomplete=off don't work as intended a lot of time
 *
 * @type {angular.IDirective}
 *
 * @ngInject
 */
class DontFill {

    /**
     * @constructor
     */
    constructor() {
        this.restrict = 'A';
    }

    /**
     * @param {angular.IInterpolateService} $interpolate - Service.
     *
     * @ngInject
     */
    controller(
        $interpolate
    ) {
        this._$interpolate = $interpolate;
    }

    link(scope, el, attr, ctrl) {
        // password fields need one of the same type above it (firefox)
        const type = el.attr('type') || 'text';

        // chrome tries to act smart by guessing on the name.. so replicate a shadow name
        const name = ctrl._$interpolate(el.attr('name') || '')(scope) || '';

        // trick the browsers to fill this innocent silhouette
        const shadowEl = angular.element(`<input type="${ type }" name="${ `${ name }_shadow` }" style="display: none">`);

        // insert before
        el.parent()[0].insertBefore(shadowEl[0], el[0]);
    }

}

angular
    .module('dont_fill', [])
    .directive('dontFill', () => {
        return new DontFill();
    });