function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {
    // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols
    var templates = getTemplates();

    return {
      template: function(element, attrs) {
        // Clone the element into an attribute. By prepending the attribute
        // name with '$', AngularJS won't write it into the DOM. The cloned
        // element propagates to the link function via the attrs argument,
        // where various contained-elements can be consumed.
        attrs['$mdUserTemplate'] = element.clone();
        return templates.chips;
      },
      require: ['mdChips'],
      restrict: 'E',
      controller: 'MdChipsCtrl',
      controllerAs: '$mdChipsCtrl',
      bindToController: true,
      compile: compile,
      scope: {
        readonly: '=?readonly',
        removable: '=?mdRemovable',
        placeholder: '@?',
        secondaryPlaceholder: '@?',
        maxChips: '@?mdMaxChips',
        transformChip: '&mdTransformChip',
        onAppend: '&?mdOnAppend',
        onAdd: '&?mdOnAdd',
        onRemove: '&?mdOnRemove',
        addedMessage: '@?mdAddedMessage',
        removedMessage: '@?mdRemovedMessage',
        onSelect: '&?mdOnSelect',
        inputAriaDescribedBy: '@?inputAriaDescribedby',
        inputAriaLabelledBy: '@?inputAriaLabelledby',
        inputAriaLabel: '@?',
        containerHint: '@?',
        containerEmptyHint: '@?',
        deleteHint: '@?',
        deleteButtonLabel: '@?',
        separatorKeys: '=?mdSeparatorKeys',
        requireMatch: '=?mdRequireMatch',
        chipAppendDelayString: '@?mdChipAppendDelay',
        ngChange: '&?'
      }
    };

    /**
     * Builds the final template for `md-chips` and returns the postLink function.
     *
     * Building the template involves 3 key components:
     * static chips
     * chip template
     * input control
     *
     * If no `ng-model` is provided, only the static chip work needs to be done.
     *
     * If no user-passed `md-chip-template` exists, the default template is used. This resulting
     * template is appended to the chip content element.
     *
     * The remove button may be overridden by passing an element with an md-chip-remove attribute.
     *
     * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for
     * transclusion later. The transclusion happens in `postLink` as the parent scope is required.
     * If no user input is provided, a default one is appended to the input container node in the
     * template.
     *
     * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for
     * transclusion in the `postLink` function.
     *
     *
     * @param element
     * @param attr
     * @returns {Function}
     */
    function compile(element, attr) {
      // Grab the user template from attr and reset the attribute to null.
      var userTemplate = attr['$mdUserTemplate'];
      attr['$mdUserTemplate'] = null;

      var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');

      var chipRemoveSelector = $mdUtil
        .prefixer()
        .buildList('md-chip-remove')
        .map(function(attr) {
          return 'md-chips>*[' + attr + ']';
        })
        .join(',');

      // Set the chip remove, chip contents and chip input templates. The link function will put
      // them on the scope for transclusion later.
      var chipRemoveTemplate   = getTemplateByQuery(chipRemoveSelector) || templates.remove,
          chipContentsTemplate = chipTemplate || templates.default,
          chipInputTemplate    = getTemplateByQuery('md-chips>md-autocomplete')
              || getTemplateByQuery('md-chips>input')
              || templates.input,
          staticChips = userTemplate.find('md-chip');

      // Warn of malformed template. See #2545
      if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {
        $log.warn('invalid placement of md-chip-remove within md-chip-template.');
      }

      function getTemplateByQuery (query) {
        if (!attr.ngModel) return;
        var element = userTemplate[0].querySelector(query);
        return element && element.outerHTML;
      }

      /**
       * Configures controller and transcludes.
       */
      return function postLink(scope, element, attrs, controllers) {
        $mdUtil.initOptionalProperties(scope, attr);

        $mdTheming(element);
        var mdChipsCtrl = controllers[0];
        if (chipTemplate) {
          // Chip editing functionality assumes we are using the default chip template.
          mdChipsCtrl.enableChipEdit = false;
        }

        mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;
        mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
        mdChipsCtrl.chipInputTemplate    = chipInputTemplate;

        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;

        element
            .attr({ tabindex: -1 })
            .on('focus', function () { mdChipsCtrl.onFocus(); })
            .on('click', function () {
              if (!mdChipsCtrl.readonly && mdChipsCtrl.selectedChip === -1) {
                mdChipsCtrl.onFocus();
              }
            });

        if (attr.ngModel) {
          mdChipsCtrl.configureNgModel(element.controller('ngModel'));

          // If an `md-transform-chip` attribute was set, tell the controller to use the expression
          // before appending chips.
          if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();

          // If an `md-on-append` attribute was set, tell the controller to use the expression
          // when appending chips.
          //
          // TODO: Remove this now that 1.0 is long since released
          // DEPRECATED: Will remove in official 1.0 release
          if (attrs.mdOnAppend) mdChipsCtrl.useOnAppendExpression();

          // If an `md-on-add` attribute was set, tell the controller to use the expression
          // when adding chips.
          if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();

          // If an `md-on-remove` attribute was set, tell the controller to use the expression
          // when removing chips.
          if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();

          // If an `md-on-select` attribute was set, tell the controller to use the expression
          // when selecting chips.
          if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();

          // The md-autocomplete and input elements won't be compiled until after this directive
          // is complete (due to their nested nature). Wait a tick before looking for them to
          // configure the controller.
          if (chipInputTemplate !== templates.input) {
            // The autocomplete will not appear until the readonly attribute is not true (i.e.
            // false or undefined), so we have to watch the readonly and then on the next tick
            // after the chip transclusion has run, we can configure the autocomplete and user
            // input.
            scope.$watch('$mdChipsCtrl.readonly', function(readonly) {
              if (!readonly) {

                $mdUtil.nextTick(function(){

                  if (chipInputTemplate.indexOf('<md-autocomplete') === 0) {
                    var autocompleteEl = element.find('md-autocomplete');
                    mdChipsCtrl.configureAutocomplete(autocompleteEl.controller('mdAutocomplete'));
                  }

                  mdChipsCtrl.configureUserInput(element.find('input'));
                });
              }
            });
          }

          // At the next tick, if we find an input, make sure it has the md-input class
          $mdUtil.nextTick(function() {
            var input = element.find('input');

            if (input) {
              mdChipsCtrl.configureInput(input);
              input.toggleClass('md-input', true);
            }
          });
        }

        // Compile with the parent's scope and prepend any static chips to the wrapper.
        if (staticChips.length > 0) {
          var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);
          $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });
        }
      };
    }

    function getTemplates() {
      return {
        chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),
        input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),
        default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),
        remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)
      };
    }
  }
function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {
    // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols
    var templates = getTemplates();

    return {
      template: function(element, attrs) {
        // Clone the element into an attribute. By prepending the attribute
        // name with '$', AngularJS won't write it into the DOM. The cloned
        // element propagates to the link function via the attrs argument,
        // where various contained-elements can be consumed.
        attrs['$mdUserTemplate'] = element.clone();
        return templates.chips;
      },
      require: ['mdChips'],
      restrict: 'E',
      controller: 'MdChipsCtrl',
      controllerAs: '$mdChipsCtrl',
      bindToController: true,
      compile: compile,
      scope: {
        readonly: '=?readonly',
        removable: '=?mdRemovable',
        placeholder: '@?',
        secondaryPlaceholder: '@?',
        maxChips: '@?mdMaxChips',
        transformChip: '&mdTransformChip',
        onAppend: '&?mdOnAppend',
        onAdd: '&?mdOnAdd',
        onRemove: '&?mdOnRemove',
        addedMessage: '@?mdAddedMessage',
        removedMessage: '@?mdRemovedMessage',
        onSelect: '&?mdOnSelect',
        inputAriaDescribedBy: '@?inputAriaDescribedby',
        inputAriaLabelledBy: '@?inputAriaLabelledby',
        inputAriaLabel: '@?',
        containerHint: '@?',
        containerEmptyHint: '@?',
        deleteHint: '@?',
        deleteButtonLabel: '@?',
        separatorKeys: '=?mdSeparatorKeys',
        requireMatch: '=?mdRequireMatch',
        chipAppendDelayString: '@?mdChipAppendDelay',
        ngChange: '&?'
      }
    };

    /**
     * Builds the final template for `md-chips` and returns the postLink function.
     *
     * Building the template involves 3 key components:
     * static chips
     * chip template
     * input control
     *
     * If no `ng-model` is provided, only the static chip work needs to be done.
     *
     * If no user-passed `md-chip-template` exists, the default template is used. This resulting
     * template is appended to the chip content element.
     *
     * The remove button may be overridden by passing an element with an md-chip-remove attribute.
     *
     * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for
     * transclusion later. The transclusion happens in `postLink` as the parent scope is required.
     * If no user input is provided, a default one is appended to the input container node in the
     * template.
     *
     * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for
     * transclusion in the `postLink` function.
     *
     *
     * @param element
     * @param attr
     * @returns {Function}
     */
    function compile(element, attr) {
      // Grab the user template from attr and reset the attribute to null.
      var userTemplate = attr['$mdUserTemplate'];
      attr['$mdUserTemplate'] = null;

      var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');

      var chipRemoveSelector = $mdUtil
        .prefixer()
        .buildList('md-chip-remove')
        .map(function(attr) {
          return 'md-chips>*[' + attr + ']';
        })
        .join(',');

      // Set the chip remove, chip contents and chip input templates. The link function will put
      // them on the scope for transclusion later.
      var chipRemoveTemplate   = getTemplateByQuery(chipRemoveSelector) || templates.remove,
          chipContentsTemplate = chipTemplate || templates.default,
          chipInputTemplate    = getTemplateByQuery('md-chips>md-autocomplete')
              || getTemplateByQuery('md-chips>input')
              || templates.input,
          staticChips = userTemplate.find('md-chip');

      // Warn of malformed template. See #2545
      if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {
        $log.warn('invalid placement of md-chip-remove within md-chip-template.');
      }

      function getTemplateByQuery (query) {
        if (!attr.ngModel) return;
        var element = userTemplate[0].querySelector(query);
        return element && element.outerHTML;
      }

      /**
       * Configures controller and transcludes.
       */
      return function postLink(scope, element, attrs, controllers) {
        $mdUtil.initOptionalProperties(scope, attr);

        $mdTheming(element);
        var mdChipsCtrl = controllers[0];
        if (chipTemplate) {
          // Chip editing functionality assumes we are using the default chip template.
          mdChipsCtrl.enableChipEdit = false;
        }

        mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;
        mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
        mdChipsCtrl.chipInputTemplate    = chipInputTemplate;

        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;

        element
            .attr({ tabindex: -1 })
            .on('focus', function () { mdChipsCtrl.onFocus(); })
            .on('click', function () {
              if (!mdChipsCtrl.readonly && mdChipsCtrl.selectedChip === -1) {
                mdChipsCtrl.onFocus();
              }
            });

        if (attr.ngModel) {
          mdChipsCtrl.configureNgModel(element.controller('ngModel'));

          // If an `md-transform-chip` attribute was set, tell the controller to use the expression
          // before appending chips.
          if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();

          // If an `md-on-append` attribute was set, tell the controller to use the expression
          // when appending chips.
          //
          // TODO: Remove this now that 1.0 is long since released
          // DEPRECATED: Will remove in official 1.0 release
          if (attrs.mdOnAppend) mdChipsCtrl.useOnAppendExpression();

          // If an `md-on-add` attribute was set, tell the controller to use the expression
          // when adding chips.
          if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();

          // If an `md-on-remove` attribute was set, tell the controller to use the expression
          // when removing chips.
          if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();

          // If an `md-on-select` attribute was set, tell the controller to use the expression
          // when selecting chips.
          if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();

          // The md-autocomplete and input elements won't be compiled until after this directive
          // is complete (due to their nested nature). Wait a tick before looking for them to
          // configure the controller.
          if (chipInputTemplate !== templates.input) {
            // The autocomplete will not appear until the readonly attribute is not true (i.e.
            // false or undefined), so we have to watch the readonly and then on the next tick
            // after the chip transclusion has run, we can configure the autocomplete and user
            // input.
            scope.$watch('$mdChipsCtrl.readonly', function(readonly) {
              if (!readonly) {

                $mdUtil.nextTick(function(){

                  if (chipInputTemplate.indexOf('<md-autocomplete') === 0) {
                    var autocompleteEl = element.find('md-autocomplete');
                    mdChipsCtrl.configureAutocomplete(autocompleteEl.controller('mdAutocomplete'));
                  }

                  mdChipsCtrl.configureUserInput(element.find('input'));
                });
              }
            });
          }

          // At the next tick, if we find an input, make sure it has the md-input class
          $mdUtil.nextTick(function() {
            var input = element.find('input');

            if (input) {
              mdChipsCtrl.configureInput(input);
              input.toggleClass('md-input', true);
            }
          });
        }

        // Compile with the parent's scope and prepend any static chips to the wrapper.
        if (staticChips.length > 0) {
          var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);
          $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });
        }
      };
    }

    function getTemplates() {
      return {
        chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),
        input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),
        default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),
        remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)
      };
    }
  }
function MdChips ( $mdTheming , $mdUtil , $compile , $log , $timeout , $$mdSvgRegistry ) { // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols var templates = getTemplates ( ) ; return { template : function ( element , attrs ) { // Clone the element into an attribute. By prepending the attribute // name with '$', AngularJS won't write it into the DOM. The cloned // element propagates to the link function via the attrs argument, // where various contained-elements can be consumed. attrs [ '$mdUserTemplate' ] = element . clone ( ) ; return templates . chips ; } , require : [ 'mdChips' ] , restrict : 'E' , controller : 'MdChipsCtrl' , controllerAs : '$mdChipsCtrl' , bindToController : true , compile : compile , scope : { readonly : '=?readonly' , removable : '=?mdRemovable' , placeholder : '@?' , secondaryPlaceholder : '@?' , maxChips : '@?mdMaxChips' , transformChip : '&mdTransformChip' , onAppend : '&?mdOnAppend' , onAdd : '&?mdOnAdd' , onRemove : '&?mdOnRemove' , addedMessage : '@?mdAddedMessage' , removedMessage : '@?mdRemovedMessage' , onSelect : '&?mdOnSelect' , inputAriaDescribedBy : '@?inputAriaDescribedby' , inputAriaLabelledBy : '@?inputAriaLabelledby' , inputAriaLabel : '@?' , containerHint : '@?' , containerEmptyHint : '@?' , deleteHint : '@?' , deleteButtonLabel : '@?' , separatorKeys : '=?mdSeparatorKeys' , requireMatch : '=?mdRequireMatch' , chipAppendDelayString : '@?mdChipAppendDelay' , ngChange : '&?' } } ; /**
     * Builds the final template for `md-chips` and returns the postLink function.
     *
     * Building the template involves 3 key components:
     * static chips
     * chip template
     * input control
     *
     * If no `ng-model` is provided, only the static chip work needs to be done.
     *
     * If no user-passed `md-chip-template` exists, the default template is used. This resulting
     * template is appended to the chip content element.
     *
     * The remove button may be overridden by passing an element with an md-chip-remove attribute.
     *
     * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for
     * transclusion later. The transclusion happens in `postLink` as the parent scope is required.
     * If no user input is provided, a default one is appended to the input container node in the
     * template.
     *
     * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for
     * transclusion in the `postLink` function.
     *
     *
     * @param element
     * @param attr
     * @returns {Function}
     */ function compile ( element , attr ) { // Grab the user template from attr and reset the attribute to null. var userTemplate = attr [ '$mdUserTemplate' ] ; attr [ '$mdUserTemplate' ] = null ; var chipTemplate = getTemplateByQuery ( 'md-chips>md-chip-template' ) ; var chipRemoveSelector = $mdUtil . prefixer ( ) . buildList ( 'md-chip-remove' ) . map ( function ( attr ) { return 'md-chips>*[' + attr + ']' ; } ) . join ( ',' ) ; // Set the chip remove, chip contents and chip input templates. The link function will put // them on the scope for transclusion later. var chipRemoveTemplate = getTemplateByQuery ( chipRemoveSelector ) || templates . remove , chipContentsTemplate = chipTemplate || templates . default , chipInputTemplate = getTemplateByQuery ( 'md-chips>md-autocomplete' ) || getTemplateByQuery ( 'md-chips>input' ) || templates . input , staticChips = userTemplate . find ( 'md-chip' ) ; // Warn of malformed template. See #2545 if ( userTemplate [ 0 ] . querySelector ( 'md-chip-template>*[md-chip-remove]' ) ) { $log . warn ( 'invalid placement of md-chip-remove within md-chip-template.' ) ; } function getTemplateByQuery ( query ) { if ( ! attr . ngModel ) return ; var element = userTemplate [ 0 ] . querySelector ( query ) ; return element && element . outerHTML ; } /**
       * Configures controller and transcludes.
       */ return function postLink ( scope , element , attrs , controllers ) { $mdUtil . initOptionalProperties ( scope , attr ) ; $mdTheming ( element ) ; var mdChipsCtrl = controllers [ 0 ] ; if ( chipTemplate ) { // Chip editing functionality assumes we are using the default chip template. mdChipsCtrl . enableChipEdit = false ; } mdChipsCtrl . chipContentsTemplate = chipContentsTemplate ; mdChipsCtrl . chipRemoveTemplate = chipRemoveTemplate ; mdChipsCtrl . chipInputTemplate = chipInputTemplate ; mdChipsCtrl . mdCloseIcon = $$mdSvgRegistry . mdClose ; element . attr ( { tabindex : - 1 } ) . on ( 'focus' , function ( ) { mdChipsCtrl . onFocus ( ) ; } ) . on ( 'click' , function ( ) { if ( ! mdChipsCtrl . readonly && mdChipsCtrl . selectedChip === - 1 ) { mdChipsCtrl . onFocus ( ) ; } } ) ; if ( attr . ngModel ) { mdChipsCtrl . configureNgModel ( element . controller ( 'ngModel' ) ) ; // If an `md-transform-chip` attribute was set, tell the controller to use the expression // before appending chips. if ( attrs . mdTransformChip ) mdChipsCtrl . useTransformChipExpression ( ) ; // If an `md-on-append` attribute was set, tell the controller to use the expression // when appending chips. // // TODO: Remove this now that 1.0 is long since released // DEPRECATED: Will remove in official 1.0 release if ( attrs . mdOnAppend ) mdChipsCtrl . useOnAppendExpression ( ) ; // If an `md-on-add` attribute was set, tell the controller to use the expression // when adding chips. if ( attrs . mdOnAdd ) mdChipsCtrl . useOnAddExpression ( ) ; // If an `md-on-remove` attribute was set, tell the controller to use the expression // when removing chips. if ( attrs . mdOnRemove ) mdChipsCtrl . useOnRemoveExpression ( ) ; // If an `md-on-select` attribute was set, tell the controller to use the expression // when selecting chips. if ( attrs . mdOnSelect ) mdChipsCtrl . useOnSelectExpression ( ) ; // The md-autocomplete and input elements won't be compiled until after this directive // is complete (due to their nested nature). Wait a tick before looking for them to // configure the controller. if ( chipInputTemplate !== templates . input ) { // The autocomplete will not appear until the readonly attribute is not true (i.e. // false or undefined), so we have to watch the readonly and then on the next tick // after the chip transclusion has run, we can configure the autocomplete and user // input. scope . $watch ( '$mdChipsCtrl.readonly' , function ( readonly ) { if ( ! readonly ) { $mdUtil . nextTick ( function ( ) { if ( chipInputTemplate . indexOf ( '<md-autocomplete' ) === 0 ) { var autocompleteEl = element . find ( 'md-autocomplete' ) ; mdChipsCtrl . configureAutocomplete ( autocompleteEl . controller ( 'mdAutocomplete' ) ) ; } mdChipsCtrl . configureUserInput ( element . find ( 'input' ) ) ; } ) ; } } ) ; } // At the next tick, if we find an input, make sure it has the md-input class $mdUtil . nextTick ( function ( ) { var input = element . find ( 'input' ) ; if ( input ) { mdChipsCtrl . configureInput ( input ) ; input . toggleClass ( 'md-input' , true ) ; } } ) ; } // Compile with the parent's scope and prepend any static chips to the wrapper. if ( staticChips . length > 0 ) { var compiledStaticChips = $compile ( staticChips . clone ( ) ) ( scope . $parent ) ; $timeout ( function ( ) { element . find ( 'md-chips-wrap' ) . prepend ( compiledStaticChips ) ; } ) ; } } ; } function getTemplates ( ) { return { chips : $mdUtil . processTemplate ( MD_CHIPS_TEMPLATE ) , input : $mdUtil . processTemplate ( CHIP_INPUT_TEMPLATE ) , default : $mdUtil . processTemplate ( CHIP_DEFAULT_TEMPLATE ) , remove : $mdUtil . processTemplate ( CHIP_REMOVE_TEMPLATE ) } ; } }
MDChips Directive Definition
MDChips Directive Definition
The md - chips directive is a template that can be used to generate the chips.