Optimizing Interpolation Watches With A Watch Delegate

Author: teropa

src/interpolate.js

@@ -24,6 +24,8 @@ function $InterpolateProvider() {
       var index = 0;
       var parts = [];
       var expressions = [];
+      var expressionFns = [];
+      var expressionPositions = [];
       var startIndex, endIndex, exp, expFn;
       while (index < text.length) {
         startIndex = text.indexOf('{{', index);
@@ -36,26 +38,45 @@ function $InterpolateProvider() {
           }
           exp = text.substring(startIndex + 2, endIndex);
           expFn = $parse(exp);
-          parts.push(expFn);
           expressions.push(exp);
+          expressionFns.push(expFn);
+          expressionPositions.push(parts.length);
+          parts.push(expFn);
           index = endIndex + 2;
         } else {
           parts.push(unescapeText(text.substring(index)));
           break;
         }
       }
 
+      function compute(values) {
+        _.forEach(values, function(value, i) {
+          parts[expressionPositions[i]] = stringify(value);
+        });
+        return parts.join('');
+      }
+
+
       if (expressions.length || !mustHaveExpressions) {
         return _.extend(function interpolationFn(context) {
-          return _.reduce(parts, function(result, part) {
-            if (_.isFunction(part)) {
-              return result + stringify(part(context));
-            } else {
-              return result + part;
-            }
-          }, '');
+          var values = _.map(expressionFns, function(expressionFn) {
+            return expressionFn(context);
+          });
+          return compute(values);
         }, {
-          expressions: expressions
+          expressions: expressions,
+          $$watchDelegate: function(scope, listener) {
+            var lastValue;
+            return scope.$watchGroup(expressionFns, function(newValues, oldValues) {
+              var newValue = compute(newValues);
+              listener(
+                newValue,
+                (newValues === oldValues ? newValue : lastValue),
+                scope
+              );
+              lastValue = newValue;
+            });
+          }
         });
       }
 

test/interpolate_spec.js

@@ -115,4 +115,32 @@ describe('$interpolate', function() {
     expect(interp).not.toBeFalsy();
   });
 
+  it('uses a watch delegate', function() {
+    var injector = createInjector(['ng']);
+    var $interpolate = injector.get('$interpolate');
+    var interp = $interpolate('has an {{expr}}');
+    expect(interp.$$watchDelegate).toBeDefined();
+  });
+
+  it('correctly returns new and old value when watched', function() {
+    var injector = createInjector(['ng']);
+    var $interpolate = injector.get('$interpolate');
+    var $rootScope = injector.get('$rootScope');
+
+    var interp = $interpolate('{{expr}}');
+    var listenerSpy = jasmine.createSpy();
+
+    $rootScope.$watch(interp, listenerSpy);
+    $rootScope.expr = 42;
+
+    $rootScope.$apply();
+    expect(listenerSpy.calls.mostRecent().args[0]).toEqual('42');
+    expect(listenerSpy.calls.mostRecent().args[1]).toEqual('42');
+
+    $rootScope.expr++;
+    $rootScope.$apply();
+    expect(listenerSpy.calls.mostRecent().args[0]).toEqual('43');
+    expect(listenerSpy.calls.mostRecent().args[1]).toEqual('42');
+  });
+
 });