Compatibility

Angular.js

keydown

Angular has a mechanism to simulate 'input' event if it sniffs 'input' event is not supported by the browser. Angular will rely on a browser feature that the keypress takes effect after 'keydown' event, i.e. the input box's value will not be updated before the 'keydown' event, so in the 'keydown' event handler, js code would get an old value.

This workaround is not supported by cloudbrowser, because we cannot make sure the deferred function to be invoked right after we set a new value to the input box.

For similar reasons, code like this would not work. We modified our code to support 'input' event, so angular would not use this walk around in cloudbrowser now.

var deferListener = function(ev, input, origValue) {
  if (!timeout) {
    timeout = $browser.defer(function() {
      timeout = null;
      if (!input || input.value !== origValue) {
        listener(ev);
      }
    });
  }
};

element.on('keydown', function(event) {
  var key = event.keyCode;

  // ignore
  //    command            modifiers                   arrows
  if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;

  deferListener(event, this, this.value);
});

Template loading

Angular has security checking for resource loading, typically anything that is not from the same domain are blocked by default.

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

In CloudBrowser, we have to load templates from file system. To get away with this checking, we need to add 'file://' to the whitelist of $sceDelegateProvider when initialize our angular app.

var app = angular.module("myApp", [])
.config(function($sceDelegateProvider) {
  return $sceDelegateProvider.resourceUrlWhitelist(['self', "file://"]);
});