fix(ng-bind-html): watch string value instead of wrapper

Ref: https://github.com/angular/angular.js/pull/4045

I have this sinking feeling that support this use case sort of
encourages binding to function that blindly trust some html.  For now,
I'm fixing the issue while I think about the use cases some more.

In the case of a function that performs any non-trivial work before
wrapping the value (e.g. the showdown filter in issue #3980, or the
binding to a simply wrapper function in issue #3932 if it did anything
meaty), this fix makes it "work" - but performance is going to suck -
you should bind to some other thing on scope that watches the actual
source and adjusts itself when that changes (e.g. the showdown filter.)
For the case of the wrapper in #3932, if one isn't performing
sanitization or some such thing - then you the developer has insight
into why that value is safe in that particular context - and it should
be available simply by name and not as a result of a function taking any
arbitrary input to make auditing of security a little saner.

Closes #3932, #3980

2 files changed, 19 insertions, 3 deletions

diff --git a/src/ng/directive/ngBind.js b/src/ng/directive/ngBind.js
index de374574..64a2d821 100644
--- a/src/ng/directive/ngBind.js
+++ b/src/ng/directive/ngBind.js
@@ -134,11 +134,15 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
  * @element ANY
  * @param {expression} ngBindHtml {@link guide/expression Expression} to evaluate.
  */
-var ngBindHtmlDirective = ['$sce', function($sce) {
+var ngBindHtmlDirective = ['$sce', '$parse', function($sce, $parse) {
   return function(scope, element, attr) {
     element.addClass('ng-binding').data('$binding', attr.ngBindHtml);
-    scope.$watch(attr.ngBindHtml, function ngBindHtmlWatchAction(value) {
-      element.html($sce.getTrustedHtml(value) || '');
+
+    var parsed = $parse(attr.ngBindHtml);
+    function getStringValue() { return (parsed(scope) || '').toString(); }
+
+    scope.$watch(getStringValue, function ngBindHtmlWatchAction(value) {
+      element.html($sce.getTrustedHtml(parsed(scope)) || '');
     });
   };
 }];
diff --git a/test/ng/directive/ngBindSpec.js b/test/ng/directive/ngBindSpec.js
index be68464f..7af4c13f 100644
--- a/test/ng/directive/ngBindSpec.js
+++ b/test/ng/directive/ngBindSpec.js
@@ -102,6 +102,18 @@ 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) {
+        // 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.
+        element = $compile('<div ng-bind-html="getHtml()"></div>')($rootScope);
+        $rootScope.getHtml = function() {
+          return $sce.trustAsHtml('<div onclick="">hello</div>');
+        };
+        $rootScope.$digest();
+        expect(angular.lowercase(element.html())).toEqual('<div onclick="">hello</div>');
+      }));
+
       describe('when $sanitize is available', function() {
         beforeEach(function() { module('ngSanitize'); });