LINUX.ORG.RU
Форум — Web-development  

Ангуляр первый. Респонсивная канва в директиве.

 


0

2

Здравствуйте, друзья.
Написал на ангуляре пару хитроумных виджетов, оформил директивами. Все мапят данные в динамическую картинку в канве. Когда засунул в бутстрап и посмотрел на мобильнике, испугался.
Сделал проверку ширины родительского элемента и выставил ширину в css.
Отдельно работает волшебно. А вот при рендеринге из шаблона, подключаемого из ng-route, родительского элемента нет. Он появляется после отработки директивы.Погуглил - выхода или нет, или страшные костыли.
Кто-нибудь сталкивался? Какой нормальный способ поправить css у канвы (через файл стилей тоже не работает, канва рисуется по заданным размерам, менять стиль надо после её отрисовки)

★★★★★

Последнее исправление: Shadow (всего исправлений: 1)
← О Meteor замолвите слово!
npm publish не публикует пакет →

Ответ на: комментарий от shquark

Пока так и делал. Костыль же, начинает срабатывать после 2000 - 3000 мс. Ну и к нему на событие ресайха ещё веть.
Ладно, это у меня рабочий макет, всё равно это нужно для совместимости с мобилками, а потом как минимум через phonegapp будет.

Кстати, наткнулся на костыль «обернуть timeout внутри timeout». Блин, а можно на JS НОРМАЛЬНО работать? А то ИЛИ костыли, ИЛИ велосипеды. ИЛИ вместе. Без них не бывает :(

Shadow ★★★★★
() автор топика
Последнее исправление: Shadow (всего исправлений: 2)
Ответ на: комментарий от Shadow

Блин, а можно на JS НОРМАЛЬНО работать? А то ИЛИ костыли, ИЛИ велосипеды. ИЛИ вместе. Без них не бывает :(

Это же фича языка и всех фреймворков на нём

Alve ★★★★★
()
Ответ на: комментарий от Shadow

Можно еще поставить $watch на ширину если у тебя этих директив не сильно много на странице - так надежней. Ресайзиться будет когда надо а не если повезет.

Нормально на js ничего нельзя. За мои 3 года на фронтенде единственное объяснение что я смог найти - Вебу ужасно не повезло и его формируют некомпетентные люди с безнадежным самомнением.

shquark
()

Всемогущий jquery может тебе помочь - меняй параметры программно яваскриптиком на джиквере - это очень просто эффективно надёжно и работает в подавляющем большинстве браузеров. CSS3 конечно лучше, профессиональнее и лучше поддержка его железом - но пока что там как и раньше слишком сложно делать многие вещи, много фишек пока не популяризированы и малоизвестны. А вот джиквери с домом работают на ура, я такие педали повсеместно вижу на рабочих хороших сайтах. Юзая джиквери люк, и не верь йоде про силу, нету никакой силы - йода просто шизофреник.

pup_kin ★
()
Ответ на: комментарий от Shadow

Я о том чтобы как-то так сделать:

var unwatch = $scope.$watch(
        function() {
            return countDirectiveWidth();
        },
        function(width, oldWidth) {
            if (width === oldWidth) {
                return;
            }

            setDirectiveWidth(width);
            unwatch();
        }
);

Где countDirectiveWidth - то как ты считаешь ширину, setDirectiveWidth - то как ты ее сетаешь. Тогда ширина засетается когда она будет известна.
Тут надо только понять надо ли тебе делать unwatch() и если надо, то когда. Если директив у тебя пару штук на странице можешь unwatch() вообще не делать - один вотчер жрать не просит, если директив много (десятки например) - нужно unwatch() сделать когда ты уверен что ширина конечная и все отрисовалось.

shquark
()
Ответ на: комментарий от pup_kin

Не могу. jquery всё запутывает и делает тормозным. Мне надо, чтобы на смартфонах без проблем работало. И я не понимаю, зачем он мне, если я могу и без него легко менять параметры.

Shadow ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← О Meteor замолвите слово!
Web-development
npm publish не публикует пакет →