AngularJS pre-render (cache) Вид контроллера со статическими данными

Я ищу предварительную визуализацию нескольких контроллеров со статическими данными. Мой код СтруктураAngularJS pre-render (cache) Вид контроллера со статическими данными

контроллер в app.js файл ($ scope.userList = localData.users)
Открыть в отдельный файл шаблона user_list.html (нг-повторе = "пользователей в USERLIST")

Моя цель - избегать мерцания при рендеринге просмотра user_list в angularJS на медленных устройствах, таких как телефоны.

источник

2014-11-30 Andrey

использования ng-bind, а не {{}} –

Что вы подразумеваете под мерцанием? – Ofiris

Мерцание - заполнение html DOM с элементами, на таких устройствах, как iPhone 4s, выглядит беспорядочно. Но когда я повторно посещаю мой просмотр, нет мерцания из-за кеша – Andrey

@ Ответ на правильный ответ, поэтому я поддержал его. Но он решает только часть мерцания - шаблона в необработанном формате до того, как Угловая имеет возможность отобразить его.

Есть на самом деле 3 государства к шаблону:

Когда шаблон сырой и необработанный
Когда шаблон был обработан с помощью углового
Когда шаблон была его данные загружены угловым

ng-cloak разрешает переход с 1 на 2, но он не может разрешить переход от 2 до 3, поскольку он не знает, когда все ваши данные готов.

Предположим, вы загружаете объект через $resource или $http, и он установит объект области foo как «Джим». Вот как ваши 3 состояния выглядят в браузере.

Первое состояние (до рендеринга):

<div>{{foo}}</div>

Второе состояние (после рендеринга, в то время как Ajax работает в фоновом режиме, может быть, некоторые обработки):

<div></div>

Третье состояние (все нагруженный):

<div>Jim</div>

Так ng-cloack очень много решает переход от 1 до 2, и скрывает тыс на уродливом {{foo}}, но это не поможет вам с мерцанием от ничего до «Джима».

Для этого вам понадобится какой-то собственный флаг. Я написал директиву, в которой я завершаю все свои шаблоны (вместе с ng-cloak), называемый «загрузка». Каждый контроллер устанавливает $scope.ready = true;, когда все данные будут готовы для государства 3. Но это очень просто, вам просто нужно обернуть следующим образом:

<div ng-hide="!ready"> 
    <!-- all of your stuff here --> 
    <div>{{foo}}</div> 
</div>

, а затем ваш контроллер может сделать:

.controller('MyCtrl',function($scope,MyService) { 
    MyService.get('/data',function(data) { 
     $scope.foo = data.foo; // or whatever else you do here 
     // other processing 
     $scope.ready = true; // this shows everything 
    }); 
});

источник

2014-11-30 09:25:56 deitch

Я бы добавил, что общий способ решения обещаний перед загрузкой контроллера - использовать разрешение routeProvider. https://docs.angularjs.org/api/ngRoute/provider/$routeProvider – Ofiris

Да, я здесь второй мысли Офириса. Слабость «разрешения» заключается в том, что вы в конечном итоге перемещаете код в маршруты и т. Д. Приходит к стилистическому предпочтению. Лично мне нравится что-то, что входит в состав контроллера, чтобы быть в контроллере. Перекрестные проблемы, такие как auth/auth, я решил. – deitch

Отъезд ngCloakdirective.

директива ngCloak используется для предотвращения углового шаблона HTML от того кратко отображается в браузере в необработанном (неоткомпилированной) форме, когда приложение загружается. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.

Попробуйте поместить его в список, содержащий div.

Если вы хотите разрешить свои данные до создания экземпляра контроллера, вы можете использовать метод routeProvider.resolve, см. this example.

источник

2014-11-30 09:15:31 Ofiris

AngularJS pre-render (cache) Вид контроллера со статическими данными

ответ

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