Обертка JSTree в угловой директиве

У меня есть две скрипки, которые имеют одну и ту же загрузку jstree. Один из них завернут в угловую директиву, а другой нет. Я новичок в угловой. Я не вижу никаких изображений в угловой версии. Также анимация не работает. Мне не хватает плагина 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, вы получаете 404 на листе jstree стиля, поместить этот 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>

Как вы смеете винить Угловое! Kidding :)

источник

2013-08-28 22:08:12 Ronnie

Yup, я просто понял это после создания примеров. Спасибо за вашу помощь! – user648869

В моем нынешнем проекте AngularJS мы интегрируем jsTree в директиве. Это началось довольно хорошо, но очень быстро это стало кошмаром. Я не могу вспомнить половину проблем, с которыми мы столкнулись, но мы мучительно закончили кучу ошибок, запутанного кода. Лучше было бы просто написать нашу директиву дерева с нуля.

Однако, я побежал в проект Я хотел бы знать об этом:

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

Это именно то, что нам нужно, это чисто AngularJS (что является огромным преимуществом, больше не JQuery событий в зарегистрируйтесь в), и создатель - хорошо известный и уважаемый человек в сообществе AngularJS (способ, которым я строю свои приложения, должен ему и его блогу).

В общем случае не рекомендуется обертывать существующую библиотеку на основе jQuery с помощью директивы Angular, и это особенно верно в данном конкретном случае. Спасите себя от боли и идите чистой Угловой.

источник

2014-02-22 21:23:00

Обертка JSTree в угловой директиве

ответ

Смежные вопросы