ng-hide和ng-show的边缘问题

Question

我构建了一个可编辑的下拉框，它在chrome和Firefox中运行良好，但它在边缘和IE中都有小问题。

http://plnkr.co/JXvhX8CoBELX3uqeUk1T

1. 搜索后，输入光标停留在文本上。
2. 点击期间闪烁

我已经添加了ng-cloak但它不起作用。

<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;
}

更新： 经过一些实验发现，在页面刷新时闪烁，因此可能是css问题（因为它可能会延迟应用），所以这对我来说不会闪烁：

<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，所以没有多行