Угловая директива внешнего шаблона в ng-repeat

У меня есть вот этот блок html, скажем: <div>{{myVar}}</div>. Этот блок кода находится на многих страницах во многих местах. Дизайнер время от времени решает случайным образом изменить внешний вид блока и его содержимое, поэтому мне приходится переделывать блоки кода на каждой странице в любом месте -> ПЛОХО!

Решением было бы поместить этот блок кода в директиву и изменить его только в одном месте. Теперь указанный блок кода имеет довольно сложную разметку, поэтому я склонен поместить его на отдельную страницу и сделать templateURLreference (для простоты редактирования), но недостатком является то, что в любом месте директива будет находиться в ng-repeat и я не уверен, делает ли angular HTTP-запрос для этой отдельной страницы, где будет находиться директива, каждый раз, когда он сталкивается с этой директивой.

Поэтому мои вопросы таковы:

1) Делает ли Angular http-запрос каждый раз, когда сталкивается с этой директивой? - есть ли вариант, чтобы этого не произошло, если произойдет?

2) С какими еще недостатками я могу столкнуться, если разместить его на отдельной странице?

3) Каково практическое правило размещения директивы в отдельном файле.

4) Когда вы узнаете, что вы «чрезмерно направляете» свою разметку?


person Radu Andrei    schedule 11.12.2014    source источник
comment
Я почти уверен, что angular кэширует любые шаблоны после первого использования, поэтому он не будет каждый раз выполнять http-запрос. Мы помещаем в директивы много полезного, и часто они находятся в отдельных файлах, пока никаких проблем!   -  person John    schedule 11.12.2014
comment
Я решил пойти по этому пути после небольшого тестирования. Пока выглядит нормально.   -  person Radu Andrei    schedule 11.12.2014


Ответы (2)


  1. Нет. Он получает шаблон один раз, помещает его в кеш и получает из кеша для всех последующих вхождений директивы. Конечно, если приложение будет перезагружено (т.е. страница обновлена, шаблон будет перезагружен. Но даже в этом случае, если вы не запретите это явно, браузер должен иметь его в своем собственном кеше.

  2. Я ничего не вижу.

  3. Я обычно делаю это, когда шаблон слишком велик, чтобы его можно было удобно поместить в строковый литерал JS. Обратите внимание, что вы также можете поместить его в отдельный файл, но внедрить его в код JavaScript во время сборки, если вы действительно не хотите, чтобы дополнительный HTTP-запрос загружал его шаблон.

person JB Nizet    schedule 11.12.2014
comment
Спасибо, то что я хотел узнать. - person Radu Andrei; 11.12.2014

Angular извлекает шаблон один раз, сохраняет в кеше и обслуживает его оттуда. Таким образом, есть только один http-вызов.

Поэтому, если вы не хотите этого избегать, вам придется использовать строку.

И вы можете сделать что-то лучше здесь. Укажите фиктивный URL в директиве. И создайте строку шаблона где-нибудь.

И в module.run внедрите службу $templatecache и вызовите:

$templatecache.put('url',templateString);

Теперь ваша директива будет вести себя как чтение из URL-адреса. но на самом деле вы указываете строку на уровне модуля.

«Таким образом, вы можете указать всю строку вашего шаблона в одном месте. Нет необходимости хранить их в директиве».

person Mohan Narang    schedule 11.12.2014
comment
Хм.. это определенно интересно. - person Radu Andrei; 11.12.2014