С этой настройкой будут некоторые сложности.
Во-первых, Angular не знает, как привязываться к пользовательским элементам, поэтому привязка изнутри Angular к компоненту Polymer, например:
<my-element foo="{{ bar }}">
установит атрибут foo элемента, который может быть только строкой, но не будет использовать Node.bind для установки привязки к свойству foo. Это большая проблема для привязки сложных объектов или когда вам нужна двусторонняя привязка.
Я создал директиву, позволяющую использовать Node.bind из Angular, но только для Dart. Вы можете перенести его на JS: https://github.com/google/angular_node_bind.dart.
Он работает, захватывая выражения в двойных квадратных скобках и настраивая выражение наблюдения и привязку через Node.bind. Предыдущий пример изменится на:
<my-element foo="[[ bar ]]">
Привязка двусторонняя. Если <my-element> изменит значение foo, значение bar будет обновлено.
Вторая проблема — внедрение зависимостей. Поскольку за создание пользовательского элемента отвечает браузер, Angular не знает, когда они созданы, и не имеет возможности внедрить зависимости. Итак, вам нужен способ для элемента Polymer получить доступ к сервису Angular (или любому сервисному объекту, Angular или нет).
После того, как вы используете что-то вроде angular-node-bind, вы можете использовать привязки для передачи службы элементу. Может быть так:
<my-element http-service="[[ $http ]]">
(Поскольку я на самом деле не эксперт по Angular, я просто пытался заставить Angular и Polymer работать вместе, я не уверен на 100%, что $http доступен только в выражениях).
Команда Angular заявила, что намерена поддерживать пользовательские элементы в Angular 2.0, хотя их недавний пост в блоге не упоминает.
person
Justin Fagnani
schedule
19.03.2014
