包裝JSTree在角指令

我有在同一jstree裝載2個小提琴，一種被包裝在一個角指令，另一種是不。我對角度很陌生。我沒有看到角度版本中的任何圖像。此外，動畫不起作用。我是否缺少一個jstree插件，還是我需要添加一個綁定函數來添加此功能？包裝JSTree在角指令

這裏是小提琴：（不在角JS）

這裏是簡單js樹代碼：

$('#tree').jstree({ 
'plugins' : ['themes', 'json_data', 'checkbox', 'types'], 
    'icon':false, 
'checkbox' : { 
    'two_state' : true // Nessesary to disable default checking childrens 
}, 
"json_data" : { 
         "data" : [ 
    { 
     "data" : "Basics", 
     "state" : "open", 
     "children" : [{ 
      "data" : "login", 
      "state" : "closed", 
      "children" : [ "login", {"data" : "results", "state" : "open"} ] 
     }, 


      { 
       "data" : "Basics", 
       "state" : "closed", 
       "children" : [ "login", "something",{"data" : "results", "state" : "closed"} ] 
      } 
     ] 
    }, 
    { 
     "data" : "All", 
     "state" : "closed", 
     "children" : [ { 
      "data" : "AddCustomer", 
      "state" : "closed", 
      "children" : [ "login","Add", {"data" : "results", "state" : "closed"} ] 
     } ] 
    } 
] 
        }, 
"types" : { 
    "types": { 
    "disabled" : { // Defining new type 'disabled' 
     "check_node" : false, 
     "uncheck_node" : false 
    }, 
    "default" : { // Override default functionality 
     "check_node" : function (node) { 
     $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click(); 
     return true; 
     }, 
     "uncheck_node" : function (node) { 
     $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click(); 
     return true; 
     } 
    } 
    } 
}

}）;

http://jsfiddle.net/R3vZv/

這裏是角指令一個plunker：

http://plnkr.co/edit/xHIc4J

來源

2013-08-28 user648869

那麼您plunker，你所得到的jstree樣式表404，把這個HTML在您的plunker和中提琴！我從作者網站引用CSS。我建議你把它拉下來，把正確的CSS路徑在那裏

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jsTreeAngular</title> 
     <link rel="stylesheet" href="http://hqnetworks.pl/strassmayr_zpf/web/js/themes/default/style.css" /> 
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script> 
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script> 
     <script type="text/javascript" src="jquery.jstree.js" ></script> 
     <script type="text/javascript" src="app.js" ></script> 
    </head> 
    <body> 
     <div ng-controller="TestCtrl" ng-app="jsTreeApp"> 
      </br> 
      </br> 
      </br> 
      <jstree data="5"></jstree> 
     </div> 
    </body> 
</html>

你怎麼敢責怪Angular！開玩笑:)

來源

2013-08-28 22:08:12 Ronnie

是啊，我剛剛創建的實例後，意識到這一點。謝謝你的幫助！ – user648869

在我的當前AngularJS項目中，我們在一個指令集jsTree。它開始非常好，但非常快，它成爲一場噩夢。我不記得上半場我們遇到的問題，但我們痛苦地結束了一堆車的，費解的代碼。從頭開始編寫我們的樹指令本來是個好主意。

不過，我只是碰到了一個項目，我想我已經知道前：

https://github.com/tchatel/angular-treeRepeat

這是我們需要什麼，這是純粹的AngularJS（這是一個巨大的好處，沒有更多的jQuery的事件註冊），創作者是在AngularJS社區（構建我的應用程序的方式欠他和他的博客很多）一個衆所周知的和尊重個人。

一般來說它不換行現有的基於jQuery的庫的角度指令是個好主意，而且在這種特殊情況下尤其如此。拯救自己的痛苦，並去純粹的角。

來源

2014-02-22 21:23:00

包裝JSTree在角指令

回答

相關問題