AngularJS условное связывание - один раз?
В настоящее время я работаю над проектом, который должен будет отображать редактируемые таблицы произвольных размеров. Я использую AngularJS, но, поскольку таблицы могут стать очень большими, я ожидаю, что все будет медленно, если я не буду использовать какую-либо форму bind-Once. Проблема в том, что, насколько я могу судить, bind-Once является абсолютным - я хочу, чтобы он фактически сохранял или, по крайней мере, восстанавливал все наблюдатели для строк, которые в данный момент редактируются.
Вот основная идея о том, как я сейчас это делаю.
<tr ng-repeat="row in rows track by key" hackonce>
<td ng-repeat="col in cols">
<div ng-click="editStuff()">{{contents}}
directive('hackonce', function() etc
link: function(scope, elem, attrs) {
if (!scope.row.editing)
setTimeout(function(){ scope.$destroy() }, 0)
}
Я генерирую строковый ключ на строке из его различных идентификаторов. Когда элемент помечен для редактирования, контроллер отключает его для копирования и меняет свой ключ, чтобы включить в него то, что в конечном итоге станет данными блокировки транзакции. Это вызывает замену в ng-repeat, и в следующий раз, когда tr создается с данными замененных строк, область остается неизменной и обновляется, когда вы редактируете материал.
Так или иначе, это действительно работает (так или иначе пока). Это уменьшило меня с более чем 500 наблюдателей в небольшом списке до менее 100, и в основном это элементы управления высшего уровня, поэтому я надеюсь, что они будут хорошо масштабироваться. Похоже, что он также сохраняет и правильно очищает прослушиватели ng-click и тому подобное, хотя область действия исчезла.
Тем не менее, это тот тип хака, который я использовал, просто набрав его вкратце, и у меня возникает ощущение, что это может вызвать рвоту у здравомыслящих людей, которые знают эту библиотеку лучше, чем я. Мне было интересно, есть ли более чистый и / или более безопасный способ сделать то же самое. То, что я ищу, - это лучший способ условного связывания один раз, или элемент / область действия, иначе пропустите его $ digest для себя и всех его потомков, основываясь на каком-то выставленном флаге.
Есть ли какой-нибудь способ сделать это, который не включает в себя доставку мясорубки в прицел или ручную сборку всего мусора jQuery, которого я надеялся избежать с Angular?
1 ответ
Это довольно сложно без дополнительных подробностей реализации, но я предполагаю, что вы используете какой-то механизм, чтобы показать / скрыть доступные только для чтения / редактируемые элементы для каждой строки? Если вы используете ng-if
чтобы сделать это, он прикрепит элементы к DOM и выполнит повторную привязку, когда условие true
и отсоединить, когда false
,
Итак, что-то вроде:
<td ng-repeat="col in cols">
<span ng-if="!isEditing(row)">Read-only stuff here</span>
<span ng-if="isEditing(row)">Editable stuff here.</span>
</td>
Я создал по-настоящему простой пример "plunk" здесь: http://plnkr.co/edit/SkdgTuK5UvEEsZmzWat6?p=preview