Missing attributes from directive - angularjs

Question

I'm trying to get my menu from js directive to my html file with angularJS.
But i dont get all of the attributes like data-toggle, or data-parent or any Id. I'm missing these tags.
data-toggle="collapse"
data-parent="#accordion2"
id="collapseTwo"
Sorry if im unclear, but i've tried to explain it as good as i could.
My js
directives.directive('productTree', ['$compile','$rootScope', function($compile, $rootScope){
return {
scope: {
items: "=",
linkPath : "="
},
template: '<div ng-bind-html="tree"></div>',
replace: true,
link: function (scope) {
var makeTree = function(categories) {
var tree;
var generateNode = function(category, index) {
var children = category.Children.map(function (item, index) {
var childrens = "";
childrens += generateSubNode(item, index)
return childrens
})
var main = "";
main += "<div class=\"accordion-group\">";
main += "<div class=\"accordion-heading\">";
main += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" href=\"#menu-" + category.Item.Id + "\">" + category.Item.Name + "</a>";
main += "</div>";
main += (children.length ? "<div id=\"menu-" + category.Item.Id + "\" class=\"accordion-body collapse\"><div class=\"accordion-inner\">" + children.join("") + "</div></div>" : "");
main += "</div>";
return main;
}
var generateSubNode = function (category, index) {
return '' + category.Item.Name + '';
}
tree = categories.map(function(category, index){
return generateNode(category, index);
});
return tree.join("");
}
scope.tree = makeTree(scope.items);
}
}
}])
My html
<div class="accordion" product-tree items="shop.Menu" link-path="paths.linkPath">
</div>
My output
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#menu-162">Genvägar</a>
</div>
<div class="accordion-body collapse">
<div class="accordion-inner">
Black Friday 2016
Black Friday: iPhone 6S 64GB Prissänkt!
Blåtandshörlurar
iPhone 7/7 Plus
</div>
</div>
</div>
This is how i want it to be
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Rubrik 1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Black Friday 2016
Black Friday: iPhone 6S 64GB Prissänkt!
Blåtandshörlurar
iPhone 7/7 Plus
</div>
</div>
</div>

Answer 1

You'll save yourself a lot of trouble if you use the template functionality of angular instead of trying to concatenate your html together piece by piece.
Set your template to something like this (or load it using templateUrl:
<div class="accordion-group" ng-repeat="category in items">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" ng-click="toggle()">
{{ category.Item.Name }}
</a>
</div>
<div ng-hide="collapsed" class="accordion-body collapse">
<div class="accordion-inner">
<a ng-repeat="child in category.children" href="{{linkPath}}/catalog/browse/shortcuts/{{ child.Item.URIPath }}/">{{ child.Item.Name }}</a>
</div>
</div>
</div>
Then, change your directive to something like this:
directives.directive('productTree', ['$compile','$rootScope', function($compile, $rootScope){
return {
scope: {
items: "=",
linkPath : "="
},
template: 'the template above (or use templateUrl)',
replace: true,
link: function (scope) {
scope.collapsed = true;
scope.toggle = function(){
scope.collapsed = !scope.collapsed;
};
}
}
}]);
Edit: If you're using, Bootstrap, you might also this out from the AngularUI team.