I'm working on an angular project and have the following code snippet:
<div vh-accordion-group id="{{$index}}" panel-class="panel-info">
<div vh-accordion-header> </div>
<div vh-accordion-body> </div>
</div>
The corresponding HTML for the accordion-group is :
<div class="panel panel-info" ng-transclude>
</div>
Additionally, here's the javascript code related to it:
home.directive("vhAccordionGroup", ['version', function (version) {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
panelClass: '@'
},
templateUrl: "JS/HomeModule/Directives/vhAccordion/vhAccordionGroup.html?v=" + version,
controller: ['$scope', '$element', function ($scope, $element) {
$scope.accordionId = $element.attr("id") + "vhAcc";
this.getAccordionId = function () {
return $scope.accordionId;
};
}],
link: function (scope, element, attrs, vhAccordionGroupController) {
element.addClass(scope.panelClass);
scope.accordionId = element.attr("id") + "vhAcc";
}
};
}]);
These accordions are being generated in a loop using ng-repeat.
The issue I'm facing is that the {{$index}} expression in the Id attribute is not being evaluated as expected. Each accordion should have a unique Id for proper functionality.
If you have any suggestions or solutions, please share them with me. I'm new to angular and would appreciate the help.