debugInfoEnabled for Angular 1.2

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

Method 2

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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply