fix(highlightText): changes to the template data will update the generated HTML

Closes #3550

Author: Robert Messerle

src/components/autocomplete/autocomplete.spec.js

@@ -11,7 +11,7 @@ describe('<md-autocomplete>', function () {
     return container;
   }
 
-  function createScope (items) {
+  function createScope (items, obj) {
     var scope;
     items = items || [ 'foo', 'bar', 'baz' ].map(function (item) { return { display: item }; });
     inject(function ($rootScope) {
@@ -23,6 +23,7 @@ describe('<md-autocomplete>', function () {
       };
       scope.searchText   = '';
       scope.selectedItem = null;
+      for (var key in obj) scope[key] = obj[key];
     });
     return scope;
   }
@@ -302,4 +303,25 @@ describe('<md-autocomplete>', function () {
       expect(scope.selectedItem).toBe(null);
     }));
   });
+
+  describe('md-highlight-text', function () {
+    it('should update when content is modified', inject(function () {
+      var template = '<div md-highlight-text="query">{{message}}</div>';
+      var scope = createScope(null, { message: 'some text', query: 'some' });
+      var element = compile(template, scope);
+
+      expect(element.html()).toBe('<span class="highlight">some</span> text');
+
+      scope.query = 'so';
+      scope.$apply();
+
+      expect(element.html()).toBe('<span class="highlight">so</span>me text');
+
+      scope.message = 'some more text';
+      scope.$apply();
+
+      expect(element.html()).toBe('<span class="highlight">so</span>me more text');
+    }));
+  });
+
 });

src/components/autocomplete/js/highlightController.js

@@ -3,20 +3,43 @@ angular
     .controller('MdHighlightCtrl', MdHighlightCtrl);
 
 function MdHighlightCtrl ($scope, $element, $interpolate) {
-  this.init = init;
+  var ctrl = this;
 
-  return init();
+  ctrl.term     = null;
+  ctrl.template = null;
+  ctrl.watchers = [];
+  ctrl.init     = init;
 
-  function init (term) {
-    var unsafeText = $interpolate($element.html())($scope),
+  function init (term, template) {
+    createWatchers(term, template);
+    $element.on('$destroy', cleanup);
+  }
+
+  function createWatchers (term, template) {
+    ctrl.watchers.push($scope.$watch(term, function (term) {
+      ctrl.term = term;
+      updateHTML(term, ctrl.template);
+    }));
+    ctrl.watchers.push($scope.$watch(compileTemplate, function (template) {
+      ctrl.template = template;
+      updateHTML(ctrl.term, template);
+    }));
+
+    function compileTemplate () { return $interpolate(template)($scope); }
+  }
+
+  function cleanup () {
+    ctrl.watchers.forEach(function (watcher) { watcher(); });
+  }
+
+  function updateHTML () {
+    if (ctrl.term === null || ctrl.template === null) return;
+    var unsafeText = $interpolate(ctrl.template)($scope),
         text       = angular.element('<div>').text(unsafeText).html(),
         flags      = $element.attr('md-highlight-flags') || '',
-        watcher    = $scope.$watch(term, function (term) {
-          var regex = getRegExp(term, flags),
-              html  = text.replace(regex, '<span class="highlight">$&</span>');
-          $element.html(html);
-        });
-    $element.on('$destroy', function () { watcher(); });
+        regex      = getRegExp(ctrl.term, flags),
+        html       = text.replace(regex, '<span class="highlight">$&</span>');
+    $element.html(html);
   }
 
   function sanitize (term) {

src/components/autocomplete/js/highlightDirective.js

@@ -36,8 +36,11 @@ function MdHighlight () {
     terminal:   true,
     scope:      false,
     controller: 'MdHighlightCtrl',
-    link:       function (scope, element, attr, ctrl) {
-      ctrl.init(attr.mdHighlightText);
+    compile:    function (element, attr) {
+      var template = element.html();
+      return function (scope, element, attr, ctrl) {
+        ctrl.init(attr.mdHighlightText, template);
+      };
     }
   };
 }