I am working on a directive that is responsible for displaying a tree of folders, including the ability to show subfolders. The directive uses recursion to handle the display of subfolders.
<div ng-click="toggleOpen()" class="action">
<span ng-if="folder.opened"><img class="icon" src="assets/img/load.png"/></span>
<span ng-if="!folder.opened"><img class="icon" src="assets/img/closed.png"/></span>
{{folder.name}}
{{folder.opened}}
<ul ng-if="folder.children.folder" class="folder">
<li ng-if="folder.opened" ng-repeat="fol in folder.children.folder">
<my-folder folder="fol"></my-folder>
</li>
</ul>
<ul ng-if="folder.children.query" class="folder">
<li ng-if="folder.opened" ng-repeat="query in folder.children.query">
<img class="icon" src="assets/img/copy.png"/>
{{query.name}}
</li>
</ul>
</div>
One important detail is that each folder contains a property called opened. Upon clicking an element, I call a function to toggle the open/close state:
$scope.toggleOpen = function(){
this.opened = !this.opened;
}
However, I have encountered an issue where the folders do not close as expected. Even after setting this.opened to false, it still remains true when I check its value during debugging.
If anyone has any insights or solutions, they would be greatly appreciated!