fix(ng-bind-html): deep watch the actual $sce value, not its toString.

Custom $sce implementations might not have a `toString()`, or it might be
compiled away in non-debug mode. Deep watching the object is the correct fix
with Angular's regular watch semantics.

The performance of this should be equivalent - `toString()` on objects usually
touches all fields, so a deep object watch will be in the same ballpark, except
that it avoids the (potentially big) string allocation.

Author: mprobst

src/ng/directive/ngBind.js

@@ -188,19 +188,16 @@ var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse,
     restrict: 'A',
     compile: function ngBindHtmlCompile(tElement, tAttrs) {
       var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
-      var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, function getStringValue(value) {
-        return (value || '').toString();
-      });
       $compile.$$addBindingClass(tElement);
 
       return function ngBindHtmlLink(scope, element, attr) {
         $compile.$$addBindingInfo(element, attr.ngBindHtml);
 
-        scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
-          // we re-evaluate the expr because we want a TrustedValueHolderType
-          // for $sce, not a string
-          element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
-        });
+        // Deep watch the value so that a getter that calls $sce.trustAsHtml and returns new objects
+        // doesn't trigger infinite digest cycles.
+        scope.$watch(ngBindHtmlGetter, function ngBindHtmlWatchAction(newVal) {
+          element.html($sce.getTrustedHtml(newVal) || '');
+        }, true);
       };
     }
   };

test/ng/directive/ngBindSpec.js

@@ -122,7 +122,7 @@ describe('ngBind*', function() {
 
   describe('ngBindHtml', function() {
 
-    it('should complain about accidental use of interpolation', inject(function($compile) {
+    it('should complain about accidental use of interpolation', inject(function($rootScope, $compile) {
       expect(function() {
         $compile('<div ng-bind-html="{{myHtml}}"></div>');
       }).toThrowMinErr('$parse', 'syntax',
@@ -176,7 +176,7 @@ describe('ngBind*', function() {
         expect(angular.lowercase(element.html())).toEqual('<div onclick="">hello</div>');
       }));
 
-      it('should watch the string value to avoid infinite recursion', inject(function($rootScope, $compile, $sce) {
+      it('should not cause infinite recursion for trustAsHtml object watches', inject(function($rootScope, $compile, $sce) {
         // Ref: https://github.com/angular/angular.js/issues/3932
         // If the binding is a function that creates a new value on every call via trustAs, we'll
         // trigger an infinite digest if we don't take care of it.
@@ -188,6 +188,32 @@ describe('ngBind*', function() {
         expect(angular.lowercase(element.html())).toEqual('<div onclick="">hello</div>');
       }));
 
+      it('should handle custom $sce objects', function() {
+        function MySafeHtml(val) { this.val = val; }
+
+        module(function($provide) {
+          $provide.decorator('$sce', function($delegate) {
+            $delegate.trustAsHtml = function(html) { return new MySafeHtml(html); };
+            $delegate.getTrustedHtml = function(mySafeHtml) { return mySafeHtml.val; };
+            return $delegate;
+          });
+        });
+
+        inject(function($rootScope, $compile, $sce) {
+          // Ref: https://github.com/angular/angular.js/issues/14526
+          // Previous code used toString for change detection, which fails for custom objects
+          // that don't override toString.
+          element = $compile('<div ng-bind-html="getHtml()"></div>')($rootScope);
+          var html = 'hello';
+          $rootScope.getHtml = function() { return $sce.trustAsHtml(html); };
+          $rootScope.$digest();
+          expect(angular.lowercase(element.html())).toEqual('hello');
+          html = 'goodbye';
+          $rootScope.$digest();
+          expect(angular.lowercase(element.html())).toEqual('goodbye');
+        });
+      });
+
       describe('when $sanitize is available', function() {
         beforeEach(function() { module('ngSanitize'); });