feat(typeahead): *BREAKING CHANGE* switch to ngBindHtml

src/typeahead/docs/demo.html

@@ -1,7 +1,7 @@
 <script type="text/ng-template" id="customTemplate.html">
   <a>
       <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
-      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
+      <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
   </a>
 </script>
 <div class='container-fluid' ng-controller="TypeaheadCtrl">

src/typeahead/docs/readme.md

@@ -67,3 +67,7 @@ The typeahead directives provide several attributes:
 * `typeahead-select-on-blur`
    _(Defaults: false)_ :
    On blur, select the currently highlighted match
+
+**BREAKING CHANGE**
+
+This component now automatically whitelists HTML with the `typeaheadHighlight` filter & users `ngBindHtml` instead of the custom `bindHtmlUnsafe` directive in the match template. If more granular security is desired, it is recommended to use a custom match template with a custom filter to enforce security more strictly.

src/typeahead/test/typeahead-highlight.spec.js

@@ -1,39 +1,41 @@
 describe('typeaheadHighlight', function () {
 
-  var highlightFilter;
+  var highlightFilterValue;
 
   beforeEach(module('ui.bootstrap.typeahead'));
-  beforeEach(inject(function (typeaheadHighlightFilter) {
-    highlightFilter = typeaheadHighlightFilter;
+  beforeEach(inject(function ($sce, typeaheadHighlightFilter) {
+    highlightFilterValue = function() {
+      return $sce.getTrustedHtml(typeaheadHighlightFilter.apply(null, Array.prototype.slice.call(arguments)));
+    };
   }));
 
   it('should higlight a match', function () {
-    expect(highlightFilter('before match after', 'match')).toEqual('before <strong>match</strong> after');
+    expect(highlightFilterValue('before match after', 'match')).toEqual('before <strong>match</strong> after');
   });
 
   it('should higlight a match with mixed case', function () {
-    expect(highlightFilter('before MaTch after', 'match')).toEqual('before <strong>MaTch</strong> after');
+    expect(highlightFilterValue('before MaTch after', 'match')).toEqual('before <strong>MaTch</strong> after');
   });
 
   it('should higlight all matches', function () {
-    expect(highlightFilter('before MaTch after match', 'match')).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
+    expect(highlightFilterValue('before MaTch after match', 'match')).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
   });
 
   it('should do nothing if no match', function () {
-    expect(highlightFilter('before match after', 'nomatch')).toEqual('before match after');
+    expect(highlightFilterValue('before match after', 'nomatch')).toEqual('before match after');
   });
 
   it('should do nothing if no or empty query', function () {
-    expect(highlightFilter('before match after', '')).toEqual('before match after');
-    expect(highlightFilter('before match after', null)).toEqual('before match after');
-    expect(highlightFilter('before match after', undefined)).toEqual('before match after');
+    expect(highlightFilterValue('before match after', '')).toEqual('before match after');
+    expect(highlightFilterValue('before match after', null)).toEqual('before match after');
+    expect(highlightFilterValue('before match after', undefined)).toEqual('before match after');
   });
 
   it('issue 316 - should work correctly for regexp reserved words', function () {
-    expect(highlightFilter('before (match after', '(match')).toEqual('before <strong>(match</strong> after');
+    expect(highlightFilterValue('before (match after', '(match')).toEqual('before <strong>(match</strong> after');
   });
 
   it('issue 1777 - should work correctly with numeric values', function () {
-    expect(highlightFilter(123, '2')).toEqual('1<strong>2</strong>3');
+    expect(highlightFilterValue(123, '2')).toEqual('1<strong>2</strong>3');
   });
 });

src/typeahead/typeahead.js

@@ -492,13 +492,13 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
     };
   }])
 
-  .filter('typeaheadHighlight', function() {
+  .filter('typeaheadHighlight', function($sce) {
 
     function escapeRegexp(queryToEscape) {
       return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
     return function(matchItem, query) {
-      return query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
+      return query ? $sce.trustAsHtml(('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>')) : $sce.trustAsHtml(matchItem);
     };
   });

template/typeahead/typeahead-match.html

@@ -1 +1 @@
-<a href="#" ng-click="$event.preventDefault()" tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
+<a href="#" ng-click="$event.preventDefault()" tabindex="-1" ng-bind-html="match.label | typeaheadHighlight:query"></a>