ng-hideとng-showのエッジの問題

Question

私は編集可能なドロップダウンボックスを作成しますが、クロムとFirefoxではうまく機能しますが、エッジとIEでは小さな問題があります。検索後

http://plnkr.co/JXvhX8CoBELX3uqeUk1T

1. 、テキストの入力カーソルステー。
2. ブリンククリック

中に私はすでにNG-マントを追加するが、それは動作しません。

<div on-click-outside="vm.editableEnabled = false"> 
<div ng-hide="vm.editableEnabled" ng-click="vm.editableEnabled = true"> 
<span ng-show="vm.group.name" class="hight-light">{{vm.group.name}}</span> 
<span ng-hide="vm.group.name">select</span> 
</div> 
<md-autocomplete ng-show="vm.editableEnabled"> 
.... 
</md-autocomplete> 
</div> 

Answer 1

私は補間を使用しないように勧めてみてくださいすることができます - ので、何cloackingは必要ありません、など

ng-bind="vm.group.name" 

<span ng-show="vm.group.name" class="hight-light" ng-bind="vm.group.name"></span> 

代わりの

{{vm.group.name}} 

を示すために、いくつかの遅延を追加

および

.ng-hide-add, { 
    transition: 0.5s linear all; 
} 

UPDATE：（それは遅延を適用することができるように）、それはCSSの問題がある可能性がありますので、ページの更新にOCURを点滅たいくつかの実験で、後 ので、これは私のために点滅していないになります。

<div layout="row" layout-align="start center"> 
    <span> 
     <span>User in &nbsp;</span> 
    </span> 
    <span on-click-outside="vm.editableEnabled = false"> 
     <span ng-hide="vm.editableEnabled" ng-click="vm.editableEnabled = true"> 
     <span ng-switch="vm.group.name"> 
      <span ng-when="" >select</span> 
      <span ng-switch-default class="hight-light" ng-bind="vm.group.name"></span> 
     </span> 
     </span> 
     <md-autocomplete 

      ng-show="vm.editableEnabled" 
      md-no-cache 
      md-input-name="search-group" 
      md-selected-item="vm.group" 
      md-search-text="vm.searchText" 
      md-items="group in vm.groups | filter: vm.searchText" 
      md-item-text="group.name" 
      md-min-length="0" 
      placeholder="Search Group"> 
      <md-item-template> 
       <span md-highlight-text="vm.searchText" ng-bind = "group.name"></span> 
      </md-item-template> 
     </md-autocomplete> 
    </span> 
    </div> 

スパンでいくつかのdivを置き換えたので、マルチラインはありません