Updating directive when scope variable changes in ng-grid? - angularjs

Question

I have a requirement for consuming an array of objects within ng-grid that are custom styled to look like a tag (similar to tags on here).
I have taken the approach of using a cellTemplate and have created a custom directive for this.
What is happening is when you sort, other columns change but the 'Tags' column does not, it stays as is, like the directive isn't getting updated.
Here is my directive:
app.directive('tag', function($compile){
return {
restrict: 'EA',
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
var e = $compile(newHtml)(scope);
element.replaceWith(e);
});
}
}
});
Here is a plunker: http://plnkr.co/edit/OxeUPaLLWtiCnvmgehnl
Thanks

Answer 1

Don't know if this fulfils all your requirements but you can change your tag directive to this:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
template: '<div><ul><li ng-repeat="tag in tags">{{tag}}</li></div>',
scope: { tags: "=tags" }
};
return ddo;
});
Or if you want to keep your code, just change the DOM first and compile it afterwards:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
scope: { tags: "#tags" },
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
element.html(newHtml);
$compile(newHtml)(scope);
});
}
};
return ddo;
});
Edit: Also, if all you want to do is change the layout, nothing stops you from calling ng-repeat in your cellTemplate:
cellTemplate: '<ul><li ng-repeat="val in row.entity.arr">{{val}}</li></ul>'}