AngularJS browser autofill workaround revisited

在經歷過了 AngularJS browser autofill workaround by using a directive 之後過了幾週,有一天我嘗試對著 login 用的表單亂來(?),發現上的 workaround 其實只能針對在頁面一載入時的自動填入,如果是先清除它,在經過人為的操作之後的自動填入,還是都抓不到... (畢竟 $timeout 只用了一次當然...)

revisit

既然一次的 $timeout 不夠用,而現在要解決的情況就是它「隨時」會在 AngularJS 預設無法察覺的情況下被填入資料,我想最直覺的選擇就是改跑 interval 了。

$interval

在 AngularJS 1.2.0 之後加入了 $interval 這個 service,使用上要注意的是它預設每一個 tick 都會觸發一次 $digest,而我現在其實並不希望每個 tick 都觸發,而是在真的有被自動填入之後。

因此這邊在 $interval 的第四個參數帶入 false,讓它不會自動做 $apply() 的動作,靠我判斷後再決定是否 $apply()

auto-fill-sync.js
app
.directive('autoFillSync', function($interval) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var INTERVAL_DELAY = 100;
      
      var intervalPromise;
      intervalPromise = $interval(function () {
        var newVal = elem.val();
        if (ngModel.$viewValue !== newVal) {
          scope.$apply(function () {
            ngModel.$setViewValue(newVal);
          });
        }
      }, INTERVAL_DELAY, 0, false);

      elem.bind('$destroy', function () {
        $interval.cancel(intervalPromise);
      });
    }
  };
});

$window.setInterval

其實應該很多人已上線的產品都還沒有升到 1.2.x (或著還在 1.0.x),在沒有 $interval 可以用的情況下,用 $window.setInterval 來擋一下也是合情合理的。

auto-fill-sync.js
.directive('autoFillSync', function($window) {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var INTERVAL_DELAY = 100;

      var intervalHandle;
      intervalHandle = $window.setInterval(function () {
        var newVal = elem.val();
        if (ngModel.$viewValue !== newVal) {
          scope.$apply(function () {
            ngModel.$setViewValue(newVal);
          });
        }
      }, INTERVAL_DELAY);

      elem.bind('$destroy', function () {
        $window.clearInterval(intervalHandle);
      });
    }
  };
});

後記

自動完成實在太方便了... 請務必一定要讓你的 AngularJS app 支援啊!

comments powered by Disqus