fix(highlightText): changes to the template data will update the gene…

…rated HTML

Closes #3550

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);
+ };
  }
  };
 }