Benutzerdefiniertes Contexmenü für verschiedene Knoten in jstree winkel Direktive

Question

In meinem Projekt habe ich basierend auf jstee angular directive Baum. Ich baue diesen Baum mit Hilfe von 2 API Anfragen. Diese Anforderungen stellen Daten für den untergeordneten Knoten des Ordners und Endpunkts (Filter) bereit. Außerdem habe ich ein benutzerdefiniertes Kontextmenü mit einigen Funktionen für verschiedene Knotentypen erstellt. In diesem Kontextmenü habe ich die Variable check definiert und mit Hilfe dieser Variable setze ich Einschränkungen für Operationen mit Knoten. Der vollständige Code von Kontextmenü wie folgt aussieht:

$scope.contextMenu = { 
      "create": { 
       "label": "Create Folder", 
       "icon": "ico/folder.png", 
       "action": function (data) { 
        var inst = $.jstree.reference(data.reference), 
         obj = inst.get_node(data.reference), 
         id = obj['original']['id']; 
        var check = obj['original']['folderId']; 

        if (typeof check == "undefined") { 
         obj = { 
          text: prompt("put folder name"), 
          parent: id 
         }; 
         eventService.createFolder(obj); 
         setTimeout(function() { 
          getTreeData(); 
          $scope.load(); 
         }, 100); 
        } 
        else { 
         alert("This function is not available"); 
         return false 
        } 
        // inst.refresh(true) 
       } 
      }, 
      "rename": { 
       "label": "Rename Folder", 
       "icon": "ico/folder.png", 
       "action": function (data) { 
        var inst = $.jstree.reference(data.reference), 
         obj = inst.get_node(data.reference), 
         check = obj['original']['folderId']; 

        if (typeof check == "undefined") { 
         var rename = { 
          id: obj.id, 
          text: prompt("put your name") 
         }; 
         eventService.modifyFolder(rename); 
         inst.rename_node(obj, rename.text); 
        } 
        else { 
         alert("This function is not available"); 
         return false 
        } 
       } 
      }, 
      "delete": { 
       "label": "Delete Folder", 
       "icon": "ico/folder.png", 
       "action": function (data) { 
        var inst = $.jstree.reference(data.reference), 
         obj = inst.get_node(data.reference), 
         node = inst.get_selected(), 
         check = obj['original']['folderId']; 

        if (typeof check == "undefined") { 
         if (!node.length) { 
          return false; 
         } 
         eventService.deleteFolder(node); 
         inst.delete_node(node); 
        } 
        else { 
         alert("This function is not available"); 
         return false 
        } 
       } 
      }, 
      "store": { 
       "label": "Store Filter", 
       "icon": "ico/file.png", 
       "action": function (data) { 
        $scope.saveStateString(); 
        var inst = $.jstree.reference(data.reference), 
         obj = inst.get_node(data.reference), 
         id = obj['original']['id'], 
         check = obj['original']['folderId']; 

        if (typeof check == "undefined") { 
         obj = { 
          body: $scope.state, 
          folderId: id, 
          text: prompt("put filter name") 
         }; 
         // console.log(obj.body); 
         setTimeout(function() { 
          eventService.storeFilter(obj); 
         }, 1000); 
         setTimeout(function() { 
          getTreeData(); 
          $scope.load(); 
          alert("click to public filters to refresh the tree") 
         }, 1500) 
        } else { 
         alert("This function is not available"); 
         return false 
        } 
       } 
      }, 
      "remove": { 
       "label": "Remove Filter", 
       "icon": "ico/file.png", 
       "action": function (data) { 
        var inst = $.jstree.reference(data.reference), 
         node = inst.get_selected(), 
         obj = inst.get_node(data.reference), 
         check = obj['original']['folderId']; 

        if (typeof check == "undefined") { 
         alert("This function is not available"); 
         return false 
        } else { 
         if (!node.length) { 
          return false; 
         } 
         eventService.deleteFilter(node); 
         inst.delete_node(node); 
        } 
       } 
      } 
     }; 

Jetzt versuche ich, dieses Kontextmenü Knotentyp aufgeteilt, dass für jeden Knoten ich verschiedene Kontextmenü sehen konnte ich einige Lösungen hier und es sagt, :

$('#jstree').jstree({ 
    'contextmenu' : { 
     'items' : customMenu 
    }, 
    'plugins' : ['contextmenu', 'types'], 
    'types' : { 
     '#' : { /* options */ }, 
     'level_1' : { /* options */ }, 
     'level_2' : { /* options */ } 
     // etc... 
    } 
}); 
function customMenu(node) 
{ 
    var items = { 
     'item1' : { 
      'label' : 'item1', 
      'action' : function() { /* action */ } 
     }, 
     'item2' : { 
      'label' : 'item2', 
      'action' : function() { /* action */ } 
     } 
    } 

    if (node.type === 'level_1') { 
     delete items.item2; 
    } else if (node.type === 'level_2') { 
     delete items.item1; 
    } 

    return items; 
} 

Ich habe versucht, diesen Weg in meiner App zu wiederholen, aber immer "undefined" statt Kontextmenü sehen.

Könnte mir bitte jemand helfen, mein Problem zu lösen? Plunker mit meinem Code

Answer 1

Stellen Sie sicher, dass Sie die Arbeit jstree Direktive verwenden. Ich ersetzte Fehler in Ihrer Richtlinie

if (config.plugins.indexOf('contextmenu') >= 0) { 
       if (a.treeContextmenu) { 
        config.contextmenu = s[a.treeContextmenu]; 
       } 
      } 

      // if (config.plugins.indexOf('contextmenu') >= 0) { 
      //  if (a.treeContextmenu) { 
      //   config.contextmenu = config.contextmenu || {}; 
      // 
      //   if (a.treeContextmenuaction != undefined) { 
      //    config.contextmenu.items = function(e) { 
      //     return s.$eval(a.treeContextmenuaction)(e); 
      //    } 
      //   } else { 
      //    config.contextmenu.items = function() { 
      //     return s[a.treeContextmenu]; 
      //    } 
      //   } 
      //  } 
      // } 

Ihr Code wie

$scope.contextMenu = { 
    "items": function custom (node){ 

      // your menu 
     } 

    if(something){ 
      // do whatever 
     } 

    return items 
} 

Dies wird Ihre Arbeit plunker aussehen sollte!