Search code examples
javascriptangularjsdebugginginternet-explorer-8backport

debugInfoEnabled for Angular 1.2


Angular 1.3 introduced a new debugInfoEnabled() method that can provide a boost in performance if called with false in the application config function:

myApp.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
}]);

Also, Angular 1.3 dropped IE8 support. And this is a problem for me, my application have to run on IE8. Hence, I cannot upgrade to angular 1.3 and have to live with 1.2.

Is there a way to achieve the same functionality with angular 1.2?

In particular, at least a part of what debugInfoEnabled() does:

  • prevent creation of ng-scope/ng-isolated-scope CSS classes while creating new scopes
  • do not attach binding data and ng-class CSS class to elements with ngBind, ngBindHtml or {{...}} interpolations

As one possible option, I can fork the angularjs repository and backport the feature back to 1.2. Then, use the fork maintaining updates from the upstream.

Would appreciate any pointers.


Solution

  • Use the underlying DOM setAttribute method to prevent the default behavior. I've edited the plunker in the other answer:

    http://plnkr.co/edit/cMar0d9IbalFxDA6AU3e?p=preview

    to do the following:

    • Clone the DOM setAttribute prototype method
    • Override it with a check for ng debug attributes
    • Return false for ng debug attributes
    • Return as normal otherwise

    Use it as follows:

    /* Clone the original */
    HTMLElement.prototype.ngSetAttribute = HTMLElement.prototype.setAttribute;
    
    /* Override the API */
    HTMLElement.prototype.setAttribute = function(foo, bar) {
    /* Define ng attributes */ 
    var nglist = {"ng-binding": true, "ng-scope":true,"ng-class":true,"ng-isolated-scope":true};
    
    console.log([foo,bar]);
    
    /* Block ng attributes; otherwise call the clone */
    if (nglist[foo]) 
      return false; 
    else if (JSON.stringify(nglist).match(foo) )
      return false;
    else
      return this.ngSetAttribute(foo, bar);
    }
    

    Replace HTMLElement with Element for IE8.

    References