diff --git a/src/components/chips/contact-chips.spec.js b/src/components/chips/contact-chips.spec.js
index 43e5f4e9cac..8d0be74fdd8 100644
--- a/src/components/chips/contact-chips.spec.js
+++ b/src/components/chips/contact-chips.spec.js
@@ -7,6 +7,7 @@ describe('', function() {
md-contact-name="name"\
md-contact-image="image"\
md-contact-email="email"\
+ md-highlight-flags="i"\
placeholder="To">\
';
@@ -31,6 +32,8 @@ describe('', function() {
}
];
scope.contacts = [];
+
+ scope.highlightFlags = "i";
}));
var attachedElements = [];
@@ -42,26 +45,34 @@ describe('', function() {
});
describe('basic functionality', function() {
- it('should show the placeholder', inject(function($timeout) {
+ it('should show the placeholder', inject(function() {
var element = buildChips(CONTACT_CHIPS_TEMPLATE);
var ctrl = element.controller('mdContactChips');
- $timeout.flush();
+
expect(element.find('input').length).toBe(1);
expect(element.find('input')[0].placeholder).toBe('To');
}));
+ it('binds the md-highlight-flags to the controller', function() {
+ var element = buildChips(CONTACT_CHIPS_TEMPLATE);
+ var ctrl = element.controller('mdContactChips');
+
+ expect(ctrl.highlightFlags).toEqual('i');
+ });
+
describe('filtering selected items', function() {
- it('should filter', inject(function($timeout) {
+ it('should filter', inject(function() {
scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {
return scope.allContacts;
});
scope.contacts.push(scope.allContacts[2]);
+
var element = buildChips(CONTACT_CHIPS_TEMPLATE);
var ctrl = element.controller('mdContactChips');
- $timeout.flush();
var autocompleteElement = element.find('md-autocomplete');
var autocompleteCtrl = autocompleteElement.controller('mdAutocomplete');
+
element.scope().$apply(function() {
autocompleteCtrl.scope.searchText = 'NAME';
autocompleteCtrl.keydown({});
@@ -72,25 +83,25 @@ describe('', function() {
}));
/* it('should not filter when disabled', inject(function($timeout) {
- scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {
- return scope.allContacts;
- });
- scope.contacts.push(scope.allContacts[2]);
- scope.filterSelected = false;
- var element = buildChips(CONTACT_CHIPS_TEMPLATE);
- var ctrl = element.controller('mdContactChips');
- $timeout.flush();
+ scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {
+ return scope.allContacts;
+ });
+ scope.contacts.push(scope.allContacts[2]);
+ scope.filterSelected = false;
+ var element = buildChips(CONTACT_CHIPS_TEMPLATE);
+ var ctrl = element.controller('mdContactChips');
+ $timeout.flush();
- var autocompleteElement = element.find('md-autocomplete');
- var autocompleteCtrl = autocompleteElement.controller('mdAutocomplete');
- element.scope().$apply(function() {
- autocompleteCtrl.scope.searchText = 'NAME';
- autocompleteCtrl.keydown({});
- });
+ var autocompleteElement = element.find('md-autocomplete');
+ var autocompleteCtrl = autocompleteElement.controller('mdAutocomplete');
+ element.scope().$apply(function() {
+ autocompleteCtrl.scope.searchText = 'NAME';
+ autocompleteCtrl.keydown({});
+ });
- var matches = autocompleteCtrl.matches;
- expect(matches.length).toBe(3);
- }));*/
+ var matches = autocompleteCtrl.matches;
+ expect(matches.length).toBe(3);
+ }));*/
});
});
@@ -101,11 +112,15 @@ describe('', function() {
function buildChips(str) {
var container;
- inject(function($compile) {
+
+ inject(function($compile, $timeout) {
container = $compile(str)(scope);
container.scope().$apply();
+ $timeout.flush();
});
+
attachedElements.push(container);
+
return container;
}
diff --git a/src/components/chips/demoContactChips/index.html b/src/components/chips/demoContactChips/index.html
index f1c64a3a4b3..b88da06da54 100644
--- a/src/components/chips/demoContactChips/index.html
+++ b/src/components/chips/demoContactChips/index.html
@@ -8,6 +8,7 @@
md-contact-image="image"
md-contact-email="email"
md-require-match="true"
+ md-highlight-flags="i"
filter-selected="ctrl.filterSelected"
placeholder="To">
diff --git a/src/components/chips/js/contactChipsDirective.js b/src/components/chips/js/contactChipsDirective.js
index e2412606d99..40c11c8a11d 100644
--- a/src/components/chips/js/contactChipsDirective.js
+++ b/src/components/chips/js/contactChipsDirective.js
@@ -1,54 +1,57 @@
- angular
- .module('material.components.chips')
- .directive('mdContactChips', MdContactChips);
+angular
+ .module('material.components.chips')
+ .directive('mdContactChips', MdContactChips);
- /**
- * @ngdoc directive
- * @name mdContactChips
- * @module material.components.chips
- *
- * @description
- * `` is an input component based on `md-chips` and makes use of an
- * `md-autocomplete` element. The component allows the caller to supply a query expression
- * which returns a list of possible contacts. The user can select one of these and add it to
- * the list of chips.
- *
- * @param {string=|object=} ng-model A model to bind the list of items to
- * @param {string=} placeholder Placeholder text that will be forwarded to the input.
- * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
- * displayed when there is at least on item in the list
- * @param {expression} md-contacts An expression expected to return contacts matching the search
- * test, `$query`.
- * @param {string} md-contact-name The field name of the contact object representing the
- * contact's name.
- * @param {string} md-contact-email The field name of the contact object representing the
- * contact's email address.
- * @param {string} md-contact-image The field name of the contact object representing the
- * contact's image.
- *
- *
- * // The following attribute has been removed but may come back.
- * @param {expression=} filter-selected Whether to filter selected contacts from the list of
- * suggestions shown in the autocomplete.
- *
- *
- *
- * @usage
- *
- *
- *
- *
- *
- */
+/**
+ * @ngdoc directive
+ * @name mdContactChips
+ * @module material.components.chips
+ *
+ * @description
+ * `` is an input component based on `md-chips` and makes use of an
+ * `md-autocomplete` element. The component allows the caller to supply a query expression which
+ * returns a list of possible contacts. The user can select one of these and add it to the list of
+ * chips.
+ *
+ * You may also use the `md-highlight-text` directive along with it's parameters to control the
+ * appearance of the matched text inside of the contacts' autocomplete popup.
+ *
+ * @param {string=|object=} ng-model A model to bind the list of items to
+ * @param {string=} placeholder Placeholder text that will be forwarded to the input.
+ * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
+ * displayed when there is at least on item in the list
+ * @param {expression} md-contacts An expression expected to return contacts matching the search
+ * test, `$query`.
+ * @param {string} md-contact-name The field name of the contact object representing the
+ * contact's name.
+ * @param {string} md-contact-email The field name of the contact object representing the
+ * contact's email address.
+ * @param {string} md-contact-image The field name of the contact object representing the
+ * contact's image.
+ *
+ *
+ * // The following attribute has been removed but may come back.
+ * @param {expression=} filter-selected Whether to filter selected contacts from the list of
+ * suggestions shown in the autocomplete.
+ *
+ *
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ */
- var MD_CONTACT_CHIPS_TEMPLATE = '\
+var MD_CONTACT_CHIPS_TEMPLATE = '\
\
- \
+ \
{{item[$mdContactChipsCtrl.contactName]}}\
\
{{item[$mdContactChipsCtrl.contactEmail]}}\
@@ -86,42 +90,43 @@
';
- /**
- * MDContactChips Directive Definition
- *
- * @param $mdTheming
- * @returns {*}
- * @ngInject
- */
- function MdContactChips ($mdTheming, $mdUtil) {
- return {
- template: function(element, attrs) {
- return MD_CONTACT_CHIPS_TEMPLATE;
- },
- restrict: 'E',
- controller: 'MdContactChipsCtrl',
- controllerAs: '$mdContactChipsCtrl',
- bindToController: true,
- compile: compile,
- scope: {
- contactQuery: '&mdContacts',
- placeholder: '@',
- secondaryPlaceholder: '@',
- contactName: '@mdContactName',
- contactImage: '@mdContactImage',
- contactEmail: '@mdContactEmail',
- contacts: '=ngModel',
- requireMatch: '=?mdRequireMatch'
- }
- };
+/**
+ * MDContactChips Directive Definition
+ *
+ * @param $mdTheming
+ * @returns {*}
+ * @ngInject
+ */
+function MdContactChips($mdTheming, $mdUtil) {
+ return {
+ template: function(element, attrs) {
+ return MD_CONTACT_CHIPS_TEMPLATE;
+ },
+ restrict: 'E',
+ controller: 'MdContactChipsCtrl',
+ controllerAs: '$mdContactChipsCtrl',
+ bindToController: true,
+ compile: compile,
+ scope: {
+ contactQuery: '&mdContacts',
+ placeholder: '@',
+ secondaryPlaceholder: '@',
+ contactName: '@mdContactName',
+ contactImage: '@mdContactImage',
+ contactEmail: '@mdContactEmail',
+ contacts: '=ngModel',
+ requireMatch: '=?mdRequireMatch',
+ highlightFlags: '@?mdHighlightFlags'
+ }
+ };
- function compile(element, attr) {
- return function postLink(scope, element, attrs, controllers) {
+ function compile(element, attr) {
+ return function postLink(scope, element, attrs, controllers) {
- $mdUtil.initOptionalProperties(scope, attr);
- $mdTheming(element);
+ $mdUtil.initOptionalProperties(scope, attr);
+ $mdTheming(element);
- element.attr('tabindex', '-1');
- };
- }
+ element.attr('tabindex', '-1');
+ };
}
+}