jstree角度指示の異なるノードのためのカスタムコンテキストメニュー

Question

私のプロジェクトでは、jstee angular directiveに基づいたツリーを持っています。私は助け2 apiの要求でこの木を造る。この要求は、フォルダーおよびエンドポイントの子ノード（フィルター）のデータを提供します。また、ノードの種類ごとにいくつかの機能を備えたカスタムコンテキストメニューを作成しました。このコンテキストメニューでは、変数checkを定義しました。この変数を助けて、ノードに関する操作の制限を設定しました。今、私は別のコンテキストメニューを見ることができ、各ノードのために、私はここにいくつかの解決策を発見し、それが言うことを、ノードの種類によって、このコンテキストメニューを分割しようとしている

$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); 
        } 
       } 
      } 
     }; 

：コンテキストメニューの完全なコードは次のようになります：

$('#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; 
} 

私のアプリでこのように繰り返そうとしていましたが、コンテキストメニューの代わりに「未定義」と表示されていました。

誰かが私の問題を解決するのを助けてくれますか？ Plunker with my code

Answer 1

作業用jstreeディレクティブを使用していることを確認してください。私はこれがあなたの作業plunkerある

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

      // your menu 
     } 

    if(something){ 
      // do whatever 
     } 

    return items 
} 

のようにあなたのコードが見えるはずですあなたのディレクティブの間違い

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]; 
      //    } 
      //   } 
      //  } 
      // } 

を置き換えます！