feat($compile/ngBind): allow disabling binding info

petebacondarwin · vojtajina · commit a93f03d93c60 · 2014-08-27T14:23:33.000-07:00
The compiler and ngBind directives add binding information (`ng-binding`
CSS class and `$binding` data property) to elements when they are bound to
the scope. This is only to aid testing and debugging for tools such as
Protractor and Batarang. In production this is unnecessary and add a
performance penalty.

This can be now disabled by calling `$compileProvider.debugInfoEnabled(false)`
in a module `config` block:
```
someModule.config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);
```

In the bench/apps/largetable-bp benchmark this change, with debug info disabled,
improved by ~140ms, that is 10%.
Measuring the "create" phase, 25 loops, mean time ~1340ms -&gt; ~1200ms.

We were storing the whole `interpolationFn` in the `$binding` data on
elements but this function was bringing a lot of closure variables with it
and so was consuming unwanted amounts of memory.

Now we are only storing the parsed interpolation expressions from the
binding (i.e. the values of `interpolationFn.expressions`).

BREAKING CHANGE:
The value of `$binding` data property on an element is always an array now
and the expressions do not include the curly braces `{{ ... }}`.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -668,6 +668,34 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
     }
   };
 
+  /**
+   * @ngdoc method
+   * @name  $compileProvider#debugInfoEnabled
+   *
+   * @param {boolean=} enabled update the debugInfoEnabled state if provided, otherwise just return the
+   * current debugInfoEnabled state
+   * @returns {*} current value if used as getter or itself (chaining) if used as setter
+   *
+   * @kind function
+   *
+   * @description
+   * Call this method to enable/disable various debug runtime information in the compiler such as adding
+   * binding information and a reference to the current scope on to DOM elements.
+   * If enabled, the compiler will add the following to DOM elements that have been bound to the scope
+   * * `ng-binding` CSS class
+   * * `$binding` data property containing an array of the binding expressions
+   *
+   * The default value is true.
+   */
+  var debugInfoEnabled = true;
+  this.debugInfoEnabled = function(enabled) {
+    if(isDefined(enabled)) {
+      debugInfoEnabled = enabled;
+      return this;
+    }
+    return debugInfoEnabled;
+  };
+
   this.$get = [
             '$injector', '$interpolate', '$exceptionHandler', '$http', '$templateCache', '$parse',
             '$controller', '$rootScope', '$document', '$sce', '$animate', '$$sanitizeUri',
@@ -867,6 +895,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         },
         NG_ATTR_BINDING = /^ngAttr[A-Z]/;
 
+    compile.$$addBindingInfo = debugInfoEnabled ? function $$addBindingInfo(element, binding) {
+      element
+          .addClass('ng-binding')
+          .data('$binding',
+              (element.data('$binding') || []).concat(binding.expressions || [binding])
+          );
+    } : noop;
 
     return compile;
 
@@ -1950,17 +1985,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         directives.push({
           priority: 0,
           compile: function textInterpolateCompileFn(templateNode) {
-            // when transcluding a template that has bindings in the root
-            // then we don't have a parent and should do this in the linkFn
-            var parent = templateNode.parent(), hasCompileParent = parent.length;
-            if (hasCompileParent) safeAddClass(templateNode.parent(), 'ng-binding');
-
             return function textInterpolateLinkFn(scope, node) {
-              var parent = node.parent(),
-                  bindings = parent.data('$binding') || [];
-              bindings.push(interpolateFn);
-              parent.data('$binding', bindings);
-              if (!hasCompileParent) safeAddClass(parent, 'ng-binding');
+              var parent = node.parent();
+              compile.$$addBindingInfo(parent, interpolateFn);
               scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
                 node[0].nodeValue = value;
               });
diff --git a/src/ng/directive/ngBind.js b/src/ng/directive/ngBind.js
@@ -51,23 +51,22 @@
      </file>
    </example>
  */
-var ngBindDirective = ngDirective({
-  compile: function ngBindCompile(templateElement) {
-    templateElement.addClass('ng-binding');
-
-    return function ngBindLink(scope, element, attr) {
-      element.data('$binding', attr.ngBind);
-      element = element[0];
-
-      scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
-        // We are purposefully using == here rather than === because we want to
-        // catch when value is "null or undefined"
-        // jshint -W041
-        element.textContent = (value == undefined ? '' : value);
-      });
-    };
-  }
-});
+var ngBindDirective = ['$compile', function($compile) {
+  return {
+    restrict: 'AC',
+    compile: function(templateElement) {
+      return function (scope, element, attr) {
+        $compile.$$addBindingInfo(element, attr.ngBind);
+        scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
+          // We are purposefully using == here rather than === because we want to
+          // catch when value is "null or undefined"
+          // jshint -W041
+          element.text(value == undefined ? '' : value);
+        });
+      };
+    }
+  };
+}];
 
 
 /**
@@ -121,11 +120,10 @@ var ngBindDirective = ngDirective({
      </file>
    </example>
  */
-var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
+var ngBindTemplateDirective = ['$interpolate', '$compile', function($interpolate, $compile) {
   return function(scope, element, attr) {
-    // TODO: move this to scenario runner
     var interpolateFn = $interpolate(element.attr(attr.$attr.ngBindTemplate));
-    element.addClass('ng-binding').data('$binding', interpolateFn);
+    $compile.$$addBindingInfo(element, interpolateFn);
     attr.$observe('ngBindTemplate', function(value) {
       element.text(value);
     });
@@ -178,14 +176,13 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
      </file>
    </example>
  */
-var ngBindHtmlDirective = ['$sce', '$parse', function($sce, $parse) {
+var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse, $compile) {
   return {
     restrict: 'A',
-    compile: function ngBindCompile(tElement, tAttrs) {
-      tElement.addClass('ng-binding');
+    compile: function (tElement, tAttrs) {
 
-      return function ngBindLink(scope, element, attr) {
-        element.data('$binding', attr.ngBindHtml);
+      return function (scope, element, attr) {
+        $compile.$$addBindingInfo(element, attr.ngBindHtml);
         var ngBindHtmlGetter = $parse(attr.ngBindHtml);
         var ngBindHtmlWatch = $parse(attr.ngBindHtml, function getStringValue(value) {
           return (value || '').toString();
diff --git a/src/ngScenario/Scenario.js b/src/ngScenario/Scenario.js
@@ -304,9 +304,6 @@ _jQuery.fn.bindings = function(windowJquery, bindExp) {
     var element = windowJquery(this),
         bindings;
     if (bindings = element.data('$binding')) {
-      if (!angular.isArray(bindings)) {
-        bindings = [bindings];
-      }
       for(var expressions = [], binding, j=0, jj=bindings.length;  j<jj; j++) {
         binding = bindings[j];
 
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -2491,14 +2491,34 @@ describe('$compile', function() {
           }));
     });
 
-    it('should decorate the binding with ng-binding and interpolation function', inject(
-        function($compile, $rootScope) {
+    describe('decorating with binding info', function() {
+
+      it('should not occur if `debugInfoEnabled` is false', function() {
+        module(function($compileProvider) {
+          $compileProvider.debugInfoEnabled(false);
+        });
+
+        inject(function($compile, $rootScope) {
           element = $compile('<div>{{1+2}}</div>')($rootScope);
-          expect(element.hasClass('ng-binding')).toBe(true);
-          expect(element.data('$binding')[0].exp).toEqual('{{1+2}}');
-        }));
+          expect(element.hasClass('ng-binding')).toBe(false);
+          expect(element.data('$binding')).toBeUndefined();
+        });
+      });
 
 
+      it('should occur if `debugInfoEnabled` is true', function() {
+        module(function($compileProvider) {
+          $compileProvider.debugInfoEnabled(true);
+        });
+
+        inject(function($compile, $rootScope) {
+          element = $compile('<div>{{1+2}}</div>')($rootScope);
+          expect(element.hasClass('ng-binding')).toBe(true);
+          expect(element.data('$binding')).toEqual(['1+2']);
+        });
+      });
+    });
+
     it('should observe interpolated attrs', inject(function($rootScope, $compile) {
       $compile('<div some-attr="{{value}}" observer></div>')($rootScope);
 
diff --git a/test/ng/directive/ngBindSpec.js b/test/ng/directive/ngBindSpec.js
@@ -122,13 +122,6 @@ describe('ngBind*', function() {
 
   describe('ngBindHtml', function() {
 
-    it('should add ng-binding class to the element in compile phase', inject(function($compile) {
-      var element = jqLite('<div ng-bind-html="myHtml"></div>');
-      $compile(element);
-      expect(element.hasClass('ng-binding')).toBe(true);
-    }));
-
-
     describe('SCE disabled', function() {
       beforeEach(function() {
         module(function($sceProvider) { $sceProvider.enabled(false); });
