Input мерцает на нг-если

Привет Я получил код наблюдения:Input мерцает на нг-если

.container2 { 
 
    width: 300px; 
 
    height: 50px; 
 
    color: white; 
 
    background-color: grey; 
 
} 
 
.myClass1 { 
 
    color: red; 
 
} 
 
.myClass2 { 
 
    color: blue; 
 
}

<!doctype html> 
 
<html ng-app="myApp" ng-controller="myController"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"> 
 
    </script> 
 

 
    <script> 
 
    angular.module("myApp", []).controller("myController", function($scope) { 
 

 
    }); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container1"> 
 
    <input ng-if="!isOpen" type="text" placeholder="Text..."> 
 
    <span ng-if="!isOpen">Text1</span> 
 
    <span ng-if="!isOpen">Text2</span> 
 
    <span ng-if="isOpen">Text, when container 2 is open</span> 
 
    <button class="myClass1" ng-click="isOpen = !isOpen" ng-class="{myClass2: isOpen}">Click here...</button> 
 

 
    </div> 
 

 
    <div class="container2" ng-show="isOpen">Container 2 is open now...</div> 
 

 
</body> 
 

 
</html>

Я построил небольшой пример в моем фрагменте кода, который показывает ту же логику, мое решение. Здесь, в фрагменте, он отлично работает (код на самом деле тот же), но в моем реальном решении, когда я нажимаю на кнопку, он скрывает жидкость «Текст 1» и «Текст 2», показывает «Текст при продолжении 2» открыто », но вход немного подошел, а затем он также скрыт. Когда я снова закрыть все элементы показывать и скрывать жидкость ... Открытие, вход мерцает, а затем прячет ... Я стараюсь показать вам с изображением ниже:

Две иконы мои пролетов «Текст 1» и «Текст 2»
треугольник моя кнопка

Шаг 1: По умолчанию это закрыто, а три элемента есть, другой нет:

Шаг 2: Я нажимаю на кнопку, она должна скрыть 3 элемента d показывает один текст, но, возможно, 0,5с вход остается там, мерцает и чем шкуры - за 0,5 секунд, это выглядит следующим образом:

Шаг 3: После того, как она мерцает на 0,5с она скрывает и чем его правильно так:

Я надеюсь, что это достаточно ясно. У кого-то есть идея? Спасибо и приветствую.

ВАЖЕН EDIT: Она мерцает при каждом элементе формы, таких как ввод, выберите флажок и т.д. Когда я положил DIV вокруг входа и дать нг-если выражение в DIV, он отлично работает ..

источник

2016-06-16 MrBuggy

Вы уверены, что у вас нет каких-либо css-переходов на ваших входных тегах? – gaurav5430

Да, это мой css для ввода ниже: input {height: 30px; padding-left: 5px; text-align: left;} - Cheers – MrBuggy

вы можете попытаться воссоздать проблему в скрипке или plunkr? или какой-либо другой рабочий код – gaurav5430

Попробуйте использовать нг-шоу, несмотря на нг-если это может работать beacuse нг-если удаляет Dóm элемент, но нг-шоу оленьей кожи на самом деле удалить Dóm элемент он просто скрывает элемент купола

это мерцание может быть по той причине, что элемент dom удален

источник

2016-06-16 11:43:16

Привет и спасибо за ответ! Я пробовал ng-show и ng-hide раньше, он также мерцает ... С div вокруг него не мерцает, и любой другой элемент также не мерцает, просто формы-элементы. – MrBuggy

PS: Вы правы с используя ng-show в случае ng-если из-за удаления. Я изменю это, потому что код лучше, но мерцание все еще там ... В худшем случае я поставлю div вокруг и ng-show на div, поэтому мерцание остановится ... – MrBuggy

Это решило мою проблема после перезагрузки ctrl-f5! Спасибо и приветствует. – MrBuggy

Input мерцает на нг-если

ответ

Смежные вопросы