Angular: как динамически создать htmlelement, привязанный к js-объекту?

Question

[Алексей Аристов]

Есть набор списков вида:

<div>
<ul>
    <li>...</li>
    <li>...</li>
</ul>
....
<ul>
    <li>...</li>
    <li>...</li>
</ul>
</div>

В любой из ul-списков может добавиться новый li-элемент.

Есть js-справочник с данными вида:

product.byId = {23: {name: 'product1'}, 45: {name: 'product2'} }.

Хочу с помощью angular добавить li так, чтобы он был привязан к одному из product.byId. Возможно ли это?

Comments

[Алексей Аристов]

MaxKorz: хочется, чтобы angular.element(el).scope() ссылался на конкретный объект из product.byId, а при описании li хочется использовать конструкцию вида {{product.byId[prod.id].descr}}, чтобы при изменении данных изменилось отображение.

[Алексей Аристов]

MaxKorz: ul-ы формируются не по product.byId. "Не так" у меня сделано всё. У меня пока не production, а исследование возможностей angular-а.

Answer 1

[Алексей Аристов]

вот то, что я хотел сделать:

var el = angular.element(ulHtmlEl);
		$scope.$apply(function() {
			var scope = $scope.$new();    // создаём дочерний scope
			scope.prod = $scope.product.byId[productData.id];
			el.append($compile(
				'<li>{{prod.fullDescr}}</li>'
			)(scope));
		});