how to use it in template

[netalex]

Hi, not really an issue but a call for more documentation. i can't figure out how to use the directive, a part of the "raw" mode. In particular, cannot understand how the demo updates the directive's data parameter to keep it in sync with actual selected element. Can you details it?

[jperugini]

Hello, I have to admit that I wrote this a long time ago and I kind of forgot a little bit how it is working. I believe that the data parameter is "copied" in the isolated scope created by the directive and the actual data is never changed only the one inside the directive scope. For each dir or file, 2 variables are added to tell if it needs to be displayed or if it is selected scope.data.dirs[index].displayed = true; scope.data.dirs[index].selected = true; Then we assign the value to the variable that is passed to ng-model of the directive. The template has almost nothing to do with the directive. It is only a wrapper around it. You can see the template code here: https://github.com/jperugini/finder-tree/blob/master/demo/index.html You can change some css for the icons too.

I do not have much time right now but I will try to dig deeper and come up with a better answer if this is not detailed enough for you.

[netalex]

thank you so much answering me on a such old topic! By and large, that's what's i'm figured out of the demo code, but i can't be able to let the directive traverse the data tree (specifically, the structure property of listFolder object), so that the result is ever the first element. i will investigate better and eventually wrote a wiki there about.

[jperugini]

I see it now. The structure property is pointing to a JSON data structure that you defined somewhere else in the controller. In this case vm refers to this which is the controller itself and I am using either homeFolder or hardDrive that I defined previously. I am assuming that you are using a $scope in your controller, in that case just call it structure: $scope.whatever You can also define the structure directly in this property but I find it more readable to define it in another variable.

[netalex]

First of all, tank you a lot to take the time to look at your code... i'm sorry my bad, i think i have made some confusion describing my issue. in a line like <finder-tree data="demo.selectedFolder.structure" ng-model="demo.tpltestSelect"> i correctly supply to data the equivalent of your homeFolder or hardDrive data structure, and so the finder traverse and visualize the structure correctly. The problem came when defining ng.model. I supply the data structure you suggested for it for the first element, thinking that on element selection the directive will update it, but it never happens so i'm stuck on how to get and use the data selected from user.

[netalex]

in pratice, it seems that this passage in your first response never happens:

"Then we assign the value to the variable that is passed to ng-model of the directive."

i will update those answer after some more research when i can, anyweay tnak you again :)

[jperugini]

Hi, I think I understand your problem but it might be easier for me to help you if I had some snippet of code to look at. If you are still stuck and looking for help can you provide me with some code and I'll take a look at it.

[netalex]

ok, i already can't investigate more througly into my issue, neither produce a plukr or a snippet. hope to do so soon. In the meantime, i could report the error i have on clickong on an element in the finder:

TypeError: Cannot read property 'length' of undefined at a.scope.displayNext (finder-tree.js:206)

who is

// Number of item in current dir
var itemNumber = scope.data.dirs[index].dirs.length + scope.data.dirs[index].files.length;

[jperugini]

Hi,

Could you post your data structure? Do you have a dirs property for each directory even if this is empty? I mean something like this { 'name': 'MainDir', 'dirs': [{ 'name': 'SubDir1', 'dirs': [], 'files': [{ 'name': File1' }, { .... }] } }

see the dirs: []

[netalex]

yep. this is the data structure

{
    "dirs": [
        {
            "name": "21_aaprile",
            "id": "28458",
            "dirs": [
                {
                    "files": [
                        {
                            "id documento": "workspace://SpacesStore/2821aeeb-476b-475e-b7ac-a49f135a59b8;1.0",
                            "id protocollo": "2173955",
                            "nome": "appunti.html",
                            "riservatezza": "5",
                            "data creazione": "08/01/2017 15:20:12",
                            "data fascicolazione": "08/01/2017 15:20:12",
                            "stato": "STATO_NORMALE",
                            "tipo documento": "Documento",
                            "name": "appunti.html",
                            "selected": false,
                            "path": [
                                "21_aaprile",
                                "documentazione xyz"
                            ]
                        },
                        {
                            "id documento": "workspace://SpacesStore/5bb22625-3e64-4b7f-9a94-c62a12c92923;1.0",
                            "id protocollo": "2173956",
                            "nome": "AAprileTestPageForCall.html",
                            "riservatezza": "5",
                            "data creazione": "08/01/2017 15:20:12",
                            "data fascicolazione": "08/01/2017 15:20:12",
                            "stato": "STATO_NORMALE",
                            "tipo documento": "Documento",
                            "name": "AAprileTestPageForCall.html",
                            "selected": false,
                            "path": [
                                "21_aaprile",
                                "documentazione xyz"
                            ]
                        },
                        {
                            "id documento": "workspace://SpacesStore/370d0a73-fc73-41b3-adf3-18627411a4b3;1.0",
                            "id protocollo": "2173957",
                            "nome": "VS Shortcuts _ Shortcut keys for Visual Studio.pdf",
                            "riservatezza": "5",
                            "data creazione": "08/01/2017 15:20:13",
                            "data fascicolazione": "08/01/2017 15:20:13",
                            "stato": "STATO_NORMALE",
                            "tipo documento": "Documento",
                            "name": "VS Shortcuts _ Shortcut keys for Visual Studio.pdf",
                            "selected": false,
                            "path": [
                                "21_aaprile",
                                "documentazione xyz"
                            ]
                        },
                        {
                            "id documento": "workspace://SpacesStore/311fcee2-400c-45db-893a-fba4ea5d3a16;1.0",
                            "id protocollo": "2173954",
                            "nome": "TestPageForCall.html",
                            "riservatezza": "5",
                            "data creazione": "08/01/2017 15:08:20",
                            "data fascicolazione": "08/01/2017 15:08:20",
                            "stato": "STATO_NORMALE",
                            "tipo documento": "Documento",
                            "name": "TestPageForCall.html",
                            "selected": true,
                            "path": [
                                "21_aaprile",
                                "documentazione xyz"
                            ]
                        }
                    ],
                    "name": "documentazione xyz",
                    "id": "28462",
                    "selected": true,
                    "displayed": true
                }
            ],
            "selected": true,
            "displayed": true
        }
    ],
    "displayed": true
}

[netalex]

i get froj a server a data structure like this:

{
    "id pratica": "23686",
    "id folder": "28458",
    "root": {
        "nome": "21_aaprile",
        "id": "28458",
        "childs": [
            {
                "documenti": [
                    {
                        "id documento": "workspace://SpacesStore/2821aeeb-476b-475e-b7ac-a49f135a59b8;1.0",
                        "id protocollo": "2173955",
                        "nome": "appuntiFolium.html",
                        "riservatezza": "5",
                        "data creazione": "08/01/2017 15:20:12",
                        "data fascicolazione": "08/01/2017 15:20:12",
                        "stato": "STATO_NORMALE",
                        "tipo documento": "Documento"
                    },
                    {
                        "id documento": "workspace://SpacesStore/5bb22625-3e64-4b7f-9a94-c62a12c92923;1.0",
                        "id protocollo": "2173956",
                        "nome": "AAprileTestPageForCall.html",
                        "riservatezza": "5",
                        "data creazione": "08/01/2017 15:20:12",
                        "data fascicolazione": "08/01/2017 15:20:12",
                        "stato": "STATO_NORMALE",
                        "tipo documento": "Documento"
                    },
                    {
                        "id documento": "workspace://SpacesStore/370d0a73-fc73-41b3-adf3-18627411a4b3;1.0",
                        "id protocollo": "2173957",
                        "nome": "VS Shortcuts _ Shortcut keys for Visual Studio.pdf",
                        "riservatezza": "5",
                        "data creazione": "08/01/2017 15:20:13",
                        "data fascicolazione": "08/01/2017 15:20:13",
                        "stato": "STATO_NORMALE",
                        "tipo documento": "Documento"
                    },
                    {
                        "id documento": "workspace://SpacesStore/311fcee2-400c-45db-893a-fba4ea5d3a16;1.0",
                        "id protocollo": "2173954",
                        "nome": "TestPageForCall.html",
                        "riservatezza": "5",
                        "data creazione": "08/01/2017 15:08:20",
                        "data fascicolazione": "08/01/2017 15:08:20",
                        "stato": "STATO_NORMALE",
                        "tipo documento": "Documento"
                    }
                ],
                "nome": "documentazione",
                "id": "28462"
            }
        ]
    }
}

and first of all i convert it with a function in your data structure

[jperugini]

Hello,

Here is a working jsfiddle with your data structure: http://jsfiddle.net/v6bn42gf/10/

In each layer of your structure, you always need a property dirs and files even if this is empty. So make sure to add dirs: [] or files: [] where it is necessary (see jsfiddle). Also you do not need to add selected or displayed property as they are added by the directive.

Let me know if you can solve your problems with this jsfiddle or if you have any question!

[netalex]

IT WAS THAT! Tank you a lot, i've never could imagined it by myself that also "file" levels and so on need a dirs property. This could be a wiki entry.

[jperugini]

Glad it helped you :). Yes I'll write that in the wiki ;)