AngularJS связывается с динамическим HTML

Question

данным этого jsfiddle: http://jsfiddle.net/HB7LU/1356/

У меня есть массив объектов, извлекаемых из моей службы. Затем я создаю строку html со ссылками, созданными вокруг тех элементов, которые существуют в массиве. Я хочу, чтобы обработчик клика привязывался непосредственно к элементу массива. Следующим поведением является способ передачи объекта непосредственно в ngClick при использовании в ngRepeat.

//these were retrieved from a service first 
$scope.termsToBindTo = [ 
    {name: 'test 1', active: false }, 
    {name: 'test 2', active: false }, 
    {name: 'test 3', active: false }]; 

$scope.rawString = 'test 1, test 2, and test 3';  

//then this html string was built after termsToBindTo is populated 
$scope.myHTML = '<a href="#" ng-click="itemClicked(item)">test 1</a>, <a href="#" ng-click="itemClicked(item)">test 2</a>, and <a href="#" ng-click="itemClicked(item)">test 3</a>'; 

UPDATE: я добавил rawString к контроллеру. Я рассмотрел предложение ниже, чтобы просто использовать ngRepeat над termsToBindTo, но мое представление должно показывать ссылки так же, как выглядит rawString. Другими словами, я не могу просто предоставить список терминовToBindTo. Представление должно содержать ссылки с любым форматированием или пунктуацией, которые существуют в rawString.

Answer 1

Обновлено JsFiddle

Вы можете использовать любые знаки препинания и формат отображения вам нужно с ngRepeat и пару вложенными spans:

<span data-ng-repeat="term in termsToBindTo"> 
    <a href="#" data-ng-click="itemClicked(term)">{{term.name}}</a><span ng-show="$index == termsToBindTo.length - 2">, and </span><span ng-show="$index < termsToBindTo.length - 2">, </span> 
</span> 

Answer 2

Я не уверен, я понимаю, что вы хотите, но вы должны использовать нг-повтор:

<div data-ng-repeat="term in termsToBindTo"> 
<a href="#" data-ng-click="itemClicked(term)" data-ng-bind="term.name"></a> 
</div> 

Answer 3

Благодаря @package я в конечном итоге разрыв строки на куски:

test 1, test 2, test 3, and test 4 
[0] --> [test 1] 
[1] --> [, ] 
[2] --> [test 2] 
[3] --> [, ] 
[4] --> [test 3] 
[5] --> [, and ] 
[6] --> [test 4] 

затем ngРепируйте над ними с помощью ngSwitch свойства, которое существует на каждом объекте в указанном выше массиве, чтобы либо показать href, либо статический текст.