From e2068ad426075ac34c06c12e2fac5f594cc81969 Mon Sep 17 00:00:00 2001
From: Chirayu Krishnappa <chirayu@chirayuk.com>
Date: Fri, 20 Sep 2013 16:30:20 -0700
Subject: [PATCH] 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
---
 src/ng/directive/ngBind.js      | 10 +++++++---
 test/ng/directive/ngBindSpec.js | 12 ++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/ng/directive/ngBind.js b/src/ng/directive/ngBind.js
index de3745747706..64a2d821533b 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 be68464ffc1a..7af4c13f2b63 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'); });