The Story

I am in process of development additional modules to Magento 1 and Magento 2.
As stores, that i build the modules for, have some third party modules, that (still)rely heavily on prototype.js, i’ve came accross big problem, that those libs doesn’t like each other very much, and if you try to initiate them both on your page, you will get a pretty error:

    Failed to instantiate module ng due to:
    TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
    at Ee (http://secretmustbekept/bundles.min.js:152:485)
    at new <anonymous> (http://localhost:3010/vidian/js/prototype/prototype.js:392:23)
    at Object.instantiate (http://secretmustbekept/bundles.min.js:44:272)
    at c (http://secretmustbekept/bundles.min.js:41:187)
    at http://secretmustbekept/bundles.min.js:8:397
    at p (http://secretmustbekept/bundles.min.js:8:184)
    at Object.provider (http://secretmustbekept/bundles.min.js:41:106)
    at http://secretmustbekept/bundles.min.js:29:305
    at Object.invoke (http://secretmustbekept/bundles.min.js:44:171)
    at d (http://secretmustbekept/bundles.min.js:42:64
 </anonymous>

And the angular part will not work at all… bummer, right? :)

Fear not! as “everything is permitted” – i did some “workaround”, it’s not the prettiest solution, but works perfectly and i have time to redesign some modules and ditch prototype.js from magento on those websites someday…

The solution

go to yourmagentoistallation\js\prototype\prototype.js, and open it for editing.
At the top of the file, put:

var bindTemp = Function.prototype.bind;

Function.prototype.bind = function(oThis) {
  if (typeof this !== 'function') {
    // closest thing possible to the ECMAScript 5
    // internal IsCallable function
    throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
  }
  var aArgs   = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP    = function() {},
      fBound  = function() {
        return fToBind.apply(this instanceof fNOP
                ? this
                : oThis,
            aArgs.concat(Array.prototype.slice.call(arguments)));
      };
  if (this.prototype) {
    // Function.prototype doesn't have a prototype property
    fNOP.prototype = this.prototype;
  }
  fBound.prototype = new fNOP();
  return fBound;
};

Then, go to the end of the file and add:

  Function.prototype.bind = bindTemp;

Assuming, you’re initiating angular app first, and the prototype second, You should see no conflict and all modules using angular and prototype should work correctly.

Tested for

Angular from 1.5.x and for Prototype JavaScript framework version 1.7