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