Как обыграть выражение в шаблоне angular?

Question

[Роман Огарков]

Нужно получить привязку к сгенерированной модели. Вот таких типов

.widget.pop-up .line.text#text{{::count}} {
		color:          {{textElements["text1"].color}};
		font-family:    {{textElements["text1"].fontFamily}};
		font-size:      {{textElements["text1"].fontSize}}px;
		padding-bottom: {{textElements["text1"].paddingBottom}}px;
		text-align:     {{textElements["text1"].textAlign}};
	}
	.widget.pop-up .line.text#text{{::count}} {
		color:          {{textElements["text2"].color}};
		font-family:    {{textElements["text2"].fontFamily}};
		font-size:      {{textElements["text2"].fontSize}}px;
		padding-bottom: {{textElements["text2"].paddingBottom}}px;
		text-align:     {{textElements["text2"].textAlign}};
	}

и так до бесконечности.
Как сделать ссылку такого типа?

color:          {{textElements["text"::count].color}};

Comments

[lega]

на А2 будет примерно так: [style.color]="textElements["text" + $index].color"
Angular Light: :style.color="textElements["text" + $index].color"
на других современных примерно так же, для А1 нужно делать директиву

Answer 1

[Сергей Протько]

Такие вещи проще делать в JS. Выносим это добро в отдельную директиву и в template функции просто собираем.

Comments

[Роман Огарков]

Замутил совместно с underscore template

.widget.pop-up .line.text#text{{::count}} {
color: {{<%=text%>.color}};
font-family: {{<%=text%>.fontFamily}};
font-size: {{<%=text%>.fontSize}}px;
padding-bottom: {{<%=text%>.paddingBottom}}px;
text-align: {{<%=text%>.textAlign}};
}

var text = 'textElements["text'+$rootScope.count+'"]';
var textEl = _.template(textTPL);
textEl = textEl({text: text});

Не знаю на сколько это привильно.

[Роман Огарков]

Сергей Протько: Где можно почитать про шаблонизатор AngularJS? Может есть какие то спец. символы типа {{#}} или {{>}} как в handlebars

[Сергей Протько]

Роман Огарков: заюзайте handlebars если хотите. У ангуляра по сути нет "шаблонизатора", там все несколько сложнее. Это биндинги на DOM все же.