Улучшение просмотра AngularJS с помощью ngshow

Прямо сейчас у меня есть представление, которое использует ng-show для отображения объекта DOM select при выполнении определенных критериев и ng-show для DOM для всех остальных случаев. Когда я это делаю и переключаюсь между двумя случаями, поле input занимает больше времени, чем когда появляется select. Задержка довольно заметна, поэтому я хочу улучшить ее, чтобы между двумя изменениями DOM была очень небольшая задержка.Улучшение просмотра AngularJS с помощью ngshow

Есть ли способ сделать это?

<div> 
    <input ng-show="field && (type == 'search' || fieldBucket[field].moreBuckets)" 
     type="text" ng-model="value"> 
    <select class="facet-value" 
      ng-show="field && type == 'filter' && !fieldBucket[field].moreBuckets" 
      ng-model="value" 
      ng-options="fieldBucket[field].buckets"> 
    </select> 
</div>

источник

2015-08-27 cmata

Вы уверены, что ваши условия изменяются точно в одно и то же время? т. е. когда кто-то становится ложным, другой становится истинным немедленно? – HankScorpio

@HankScorpio Я немного меняю код, чтобы сделать его более простым, но я уверен, что они должны измениться в одно и то же время. Еще одна вещь, которую я попробовал, заключалась в том, чтобы сделать «ng-hide», а другой - «ng-show», и у нее все еще была такая же проблема. – cmata

Я не думаю, что проблема связана с ng-show или ng-hide или ng-if или любой другой директивой. Скорее всего, условия не меняются одновременно. Возможно, один из них полагается на какое-то асинхронное событие, такое как ответ сервера? В любом случае, нет ничего плохого в html, который вы опубликовали. Я предлагаю показать больше вашего кода, включая изменения условий. В соответствии с рекомендациями SO, пожалуйста, создайте плункер, который воспроизводит проблему, если это возможно. – HankScorpio

Я не думаю, что это так или иначе связан с нг-шоу или скрыть это может зависеть от каких-то данных, которые вы ожидаете от сервера в ответ. Я создал для вас простую демоверсию, что в базовом ng-show/hide нет ни одного нога, если их значение будет установлено в одно и то же время.

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    </head> 
    <body> 
    <div class="wrapper" ng-app="test"> 
     <div class="phone" ng-controller="TestCtrl" ng-init="type = 'search'"> 
     <a href="" ng-click="type = 'search'"> search</a> 
     <a href="" ng-click="type = 'filter'"> filter</a> 
     <div > 
      <input ng-show="type == 'search'" 
      type="text" ng-model="value"> 
      <select class="facet-value" 
      ng-show="type == 'filter'" 
      ng-model="value" 
      ng-options="obj.name for obj in list"> 
      </select> 
     </div> 
     </div> 
    </body> 
    <script type="text/javascript"> 
     var app = angular.module('test', []); 

     function TestCtrl($scope) { 
     $scope.list = [{name : 'one'}, {name : 'two'}]; 
     } 
    </script> 
</html>

источник

2015-08-27 19:50:38

Считаете ли вы, что если бы я вносил изменения, чтобы директивы связывались с логической переменной, а не с вычислением углового выражения, синхронизировали бы DOM-манипуляции? – cmata

Причина, лежащая за вашей ногой, может быть вычислением в ng-show/hide. даже логическая производительность одинакова. это в конечном итоге работает только с логическим. он оценивает ваше выражение и выражает только истину или ложь. search filter , а затем ng-show = "type" и ng-show = "! Type", он будет иметь одинаковую производительность. –

Улучшение просмотра AngularJS с помощью ngshow

ответ

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