CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
kyleder
kyleder

Reputation: 667

AngularJS directives: How do I dynamically change the element html in an ng-repeat?

I have an angular directive that I'm applying an ng-repeat to. The purpose of the directive is to swap itself out with a different directive that is based on a value passed into the original directive:

<content-type-directive type="item.type" ng-repeat="item in items"></content-type-directive>

becomes

<type1-specific-directive></type1-specific-directive>
<type2-specific-directive></type2-specific-directive>
<type1-specific-directive></type1-specific-directive>
<type1-specific-directive></type1-specific-directive>
...

Full example: http://jsfiddle.net/qPGZ8/6/

This would be straight forward to do if the html of the second directive could be rendered inside the first directive's wrapping element, but in this case I need it to actually replace the original item.

This is related to Customizing the template within a Directive

In Misko's answer he explains using element.replaceWith() to swap out the original html. This works fine when the item is not in an ng-repeat, but inside of an ng-repeat it breaks the ability for the ng-repeat to update itself with new elements.

Upvotes: 1

Views: 1260

Answers (1)

zs2020
zs2020

Reputation: 54514

It is relating to the bug https://github.com/angular/angular.js/issues/2151. Upgrading to the latest version 1.2.0 will fix it.

Btw, the button should be put in the controller's scope. Hope it was a typo.

Demo

Upvotes: 1

Related Questions