debugInfoEnabled for Angular 1.2

Question

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.

Answer 1

You can try disable it by mentioning $logProvider.debugEnabled(true); inside your angular configuration. In order to get effect of debugEnabled setting, You need ensure that while doing log use $log provider.

Sample Code

var app = angular.module('myApp', []);

app.config(function($logProvider){
  $logProvider.debugEnabled(false);
});

app.controller('MainCtrl', function($scope, $log ) {
  $scope.name = 'Hello World!';
  $scope.testModel = {name: "test"};
  //console.log('This will show log even if debugging is disable');
  $log.debug('TEST Log');
});

Here is Fiddle

Hopefully this will help you.

Answer 2

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

• CSS classes used by angular

• Prototypes, Constructor Functions, and Taxidermy

• AngularJS IE8 Shim

• AngularJS IE8 Builds

• Document Object Model Prototypes

• Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

• What's New in Internet Explorer 9