fix(ngBindHtml): throw error if interpolation is used in expression

Closes #8824
angular · Aug 29, 2014 · cd21602 · cd21602
1 parent 5f3f25a
commit cd21602
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/ng/directive/ngBind.js b/src/ng/directive/ngBind.js
@@ -186,14 +186,14 @@ var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse,
   return {
     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);
-        var ngBindHtmlGetter = $parse(attr.ngBindHtml);
-        var ngBindHtmlWatch = $parse(attr.ngBindHtml, function getStringValue(value) {
-          return (value || '').toString();
-        });
 
         scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
           // we re-evaluate the expr because we want a TrustedValueHolderType

diff --git a/test/ng/directive/ngBindSpec.js b/test/ng/directive/ngBindSpec.js
@@ -122,6 +122,14 @@ describe('ngBind*', function() {
 
   describe('ngBindHtml', function() {
 
+    it('should complain about accidental use of interpolation', inject(function($compile) {
+      expect(function() {
+        $compile('<div ng-bind-html="{{myHtml}}"></div>');
+      }).toThrowMinErr('$parse', 'syntax', "Syntax Error: Token 'myHtml' is unexpected, " +
+          "expecting [:] at column 3 of the expression [{{myHtml}}] starting at [myHtml}}].");
+    }));
+
+
     describe('SCE disabled', function() {
       beforeEach(function() {
         module(function($sceProvider) { $sceProvider.enabled(false); });