Плюс бонусные советы по побегу

Обычно в Angular есть главное представление и несколько моделей. Жизнь прекрасна, пока в главном представлении не будет написана одна функция, которая должна управлять содержимым дочерней модели. Как передать эту функцию дочернему компоненту? Для тех, кто не знаком с Angular, передача данных между компонентами часто сбивает с толку.

В конце этой статьи есть несколько дополнительных советов по избавлению от ошибок, которые часто возникают при объединении ссылок.

Стартовый код:

Все начинается с главного вида. У вас наверняка есть что-то вроде этого:

.controller('appCtrl', function ($scope) {
});
.component('app', {
  controller: 'appCtrl'
});

и в ваших моделях у вас, вероятно, есть это:

.component('modelName', {
  controller: function($scope) {
  }
});

У вас, наверное, тоже есть шаблоны:

<div id='app'>
  <Model1></Model1>
  <!--other components-->
</div>

$ ctrls и привязки

Начнем с диаграммы:

Вот слова:

  1. Вы начинаете с главного представления (вверху слева) и объявляете данные, которые хотите передать дочерним компонентам.
  2. В HTML основного представления используйте $ ctrl для доступа к данным внутри контроллера в модели (ModelOne на схеме), в которую вы хотите передать данные.
  3. Внутри компонента .component модели, в которую вы только что передали данные (ModelOne), используйте то же имя, которое вы объявили в HTML («данные»), и добавьте его в объект привязок (примечание: привязки, множественное число). Вы можете использовать ‘‹ ’,‘ = ’,‘ & ’или‘ @ ’в зависимости от того, что вам нужно.
  4. Затем повторите шаги 2 и 3 для следующего дочернего компонента.

‹, =, @ И &’ s

‘‹ ’: Это однонаправленная привязка. Он используется для передачи данных и состояний дочерним компонентам. Иногда это может быть источником ошибок, когда вы изменяете состояние дочернего компонента и ожидаете, что родительский компонент отразит это изменение. Это может работать не так, как вы ожидаете.

‘=’: Двусторонняя привязка. Он использует грязную проверку и может вызвать задержку. Вот хорошее объяснение Quora о том, что это делает, и о его потерях в производительности.



Каковы недостатки двусторонней привязки данных в Angular JS?
Ответ (1 из 3): производительность - это первое, что приходит на ум из-за способа грязная проверка… www.quora.com



‘@’: Используется для передачи строк. Эти строки поддерживают {{}} для интерполированных значений.

‘&’: Передайте функцию или метод с помощью ‘&’, чтобы дочерний компонент имел доступ к этой функции.

Прочтите документацию здесь для получения дополнительной информации.

Бонус: экранирование и интерполяция ссылок XSS

Например, для рендеринга видео на YouTube требуется интерполировать основную ссылку вместе с идентификатором видео, который вы получаете из API-интерфейса YouTube. Это кажется довольно простым, пока вы не заметите, что браузер выдает ошибку, когда вы делаете что-то вроде этого:

src='https://www.youtube.com/embed/' + {{$ctrl.video.id.videoId}}

Проблема: angular имеет очень строгий механизм защиты от XSS.
Вот решение:

ng-src="{{'https://www.youtube.com/embed/'+$ctrl.video.id.videoId}}"

Не забудьте заключить в одинарные кавычки знак "+" вокруг основной ссылки. Пожалуйста.