In order to streamline the process of managing tags with random content, I have devised a 'tag' manipulation system using the angular-ui alert mechanism. The system includes a factory and a directive as follows:
Factory:
app.factory(
'ObjectTag',
function () {
function ObjectTag() {
this.tags = [];
}
ObjectTag.prototype = {
hasTags: function () {
return( this.tags.length != 0);
},
addTag: function (msgText, objectId) {
this.tags.push({type: 'info', msg: msgText, encapsulatedId: objectId});
},
closeTag: function(index){
this.tags.splice(index, 1);
},
getTags: function () {
return this.tags;
}
};
return (ObjectTag);
});
Directive:
app.directive('objectTag', function () {
return {
restrict: 'E',
require: '^objectTags',
template: "<div ng-if='objectTags.hasTags()'><alert ng-repeat='tag in objectTags.getTags()' type='{{ tag.type }}' close='objectTags.closeTag($index)'>{{ tag.msg }}</alert></div>"
}
});
This setup allows for easy addition and removal of tags. However, my issue lies in the appearance of the tags. I want each tag to be displayed next to another, similar to how tags are displayed here, but currently they appear on separate rows.
To implement this system, use the following code snippets:
<object-tag object-tags="objectTags"></object-tag>
$scope.objectTags = new ObjectTag();