点击外部md-chips后重新聚焦

时间:2017-06-21 16:41:00

标签: angularjs angular-material

将Angular Material从版本1.1.1升级到1.1.4后,md-chips不像以前一样工作。

在条目中键入一个字符串,然后单击外部,焦点将返回到输入。

我不希望这种情况发生。

使用Angular Material 1.1.1:

https://youtu.be/LD2CxbuMxJg

使用Angular Material 1.1.4:

https://youtu.be/dG1kKvU1Y0s

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

mdChipsCtrl中,有一个布尔变量负责将焦点返回到名为shouldFocusLastChip的条目。

我通过使用以下指令更改此变量的值来覆盖该函数:

angular.module('myApp').directive('mdChips', function () {
  return {                                                                   
    restrict: 'E',                                                          
    require: 'mdChips', // Extends the original mdChips directive           
    link: function (scope, element, attributes, mdChipsCtrl) {              
      mdChipsCtrl.appendChip = function (newChip) {
        // Set to FALSE                                  
        this.shouldFocusLastChip = false;                                                                    

        if (this.useTransformChip && this.transformChip) {                  
          var transformedChip = this.transformChip({'$chip': newChip});     

          // Check to make sure the chip is defined before assigning it, otherwise, we'll just assume
          // they want the string version.                                  
          if (angular.isDefined(transformedChip)) {                         
            newChip = transformedChip;                                      
          }                                                                 
        }                                                                   

        // If items contains an identical object to newChip, do not append  
        if (angular.isObject(newChip)){                                     
          var identical = this.items.some(function(item){                   
            return angular.equals(newChip, item);                           
          });                                                               
          if (identical) return;                                            
        }                                                                   

        // Check for a null (but not undefined), or existing chip and cancel appending
        if (newChip === null || this.items.indexOf(newChip) + 1) return;    

        // Append the new chip onto our list                                
        var length = this.items.push(newChip);                              
        var index = length - 1;                                             

        // Update model validation                                          
        this.ngModelCtrl.$setDirty();                                       
        this.validateModel();                                               

        // If they provide the md-on-add attribute, notify them of the chip addition
        if (this.useOnAdd && this.onAdd) {                                  
          this.onAdd({ '$chip': newChip, '$index': index });                
        }                                                                   
      };                                                                    
    }                                                                       
};