#angularjs
#angularjs
Вопрос:
Я разрабатываю небольшое приложение для управления сообщениями. Такое приложение имеет две панели на больших экранах: боковую панель со списком сообщений и панель с подробными сведениями о сообщении: [ ] [ ]. Но в случае, если экран маленький (смартфон) и просто потому, что мы хотим, чтобы он был отзывчивым, отображается только боковая панель, и когда вы нажимаете на сообщение, детали отображаются, скрывая боковую панель.
С Angular последний подход довольно прост в выполнении некоторой маршрутизации, и он работает очень хорошо. Моя проблема возникает, когда экран достаточно большой, чтобы принимать обе панели вместе, так как я хочу, чтобы Angular по-прежнему управлял потоком, но не скрывал / показывал какую-либо панель, поскольку я хочу, чтобы были видны оба вида.
Есть ли способ выполнить маршрутизацию (по одному виду за раз) с помощью Angular, когда экран маленький, но изменить поведение, когда экран большой, чтобы показывать два вида одновременно?
Кстати, я использую Bootstrap для управления отзывчивостью, и это работает довольно хорошо (панели скрываются / отображаются в зависимости от размера экрана), я просто беспокоюсь о том, как я собираюсь справиться с этим с помощью Angular сейчас.
Примеры
Просто чтобы посмотреть, смогу ли я лучше объяснить, это то, что я хочу, чтобы это было, когда экран достаточно большой: http://plnkr.co/edit/WuN08Q?p=preview (убедитесь, что вы сделали экран предварительного просмотра достаточно большим, чтобы его можно было увидеть, нажмите на сообщение, а затем измените его размер на меньший, чтобы увидеть, как скрываются детали)
И это, когда он маленький: http://plnkr.co/edit/UL1OpXjzEcCU9722lpA9?p=preview
В первом примере видны две панели, и одна из них скрыта, когда экран становится маленьким, во втором примере используются два представления и работает так, как я хочу, когда экран маленький. Теперь я хочу, чтобы он вел себя как первый пример, когда экран достаточно большой, и как второй, когда он маленький.
Спасибо Angular wizards!
Ответ №1:
Вероятно, это не тот ответ, который вы ищете, но одно решение, основанное на ответе Джонатана Хайра, содержится в ответвлении вашего оригинального плунжера:
http://plnkr.co/edit/chdn6XDpdnqaay3VfOqI?p=preview
Это решение не является предпочтительным, потому что в конечном итоге вам придется обновляться, когда вы преодолеваете барьер sm / large (в данном случае шириной 768 пикселей), чтобы получить ожидаемое поведение рендеринга.
Я думаю, что лучший подход к этой проблеме — не использовать маршрутизацию. (Это именно то, что я сделал для вашего «Большого просмотра».)
В качестве примера приведем унифицированную область, в которой используется утилита bootstrap responsive и которая основана на определении размера Джонатана. При изменении размера экрана он должен соответствовать ожидаемому поведению. Маршрутизация не требуется.
Комментарии:
1. Спасибо! Ваш второй пример — это то, что я искал: D Может быть, не совсем то, что я хотел, поскольку он не обновляется автоматически, но достаточно близко, и это будет работать просто отлично. Так что большое вам спасибо, хотя Джонатан дал мне несколько советов, и вы тоже, я все еще не мог понять, как это сделать сам. Ставлю 1 Джонатану, хотя он тоже помог.
2. Второй пример должен обновиться.
Ответ №2:
Вы можете использовать функцию в разделе templateUrl для маршрутизации в конфигурации вашего приложения и изменять templateUrl в зависимости от текущего размера окна. Осмелюсь предположить, что у вас будет такая же функциональность в контроллерах, поэтому изменений только в templateUrl должно быть достаточно.
ПРИМЕЧАНИЕ: В моем примере ниже я только что разместил логику размера окна там, где это необходимо, вы бы поместили это где-нибудь в другом месте в своем приложении, например, в качестве вспомогательного файла или службы.
Комментарии:
1. У меня такое ощущение, что ваш пример просто изменяет размер одного из представлений? Я делаю это уже с помощью Bootstrap. Я спрашивал, как отображать два представления одновременно, когда экран большой, и только одно, когда оно маленькое. В вашем примере все время отображается только один вид, я не понимаю, как это решает мои сомнения, я боюсь: S
2. Извините, я предположил, что ваш второй вид (список сообщений) всегда доступен для просмотра и будет просто скрываться при событии щелчка при отображении основного сообщения. Я обновлю свой пример.