как использовать плагин дерева jquery aci в угловой директиве js

Question

как использовать плагин дерева jquery aci в угловой директиве js

0

Я должен использовать acitree jquery plugin (Источник: http://acoderinsights.ro/source/aciTree/aciTree-radio.html) в угловых js, чтобы отобразить все мои деревья.

Помогите мне, как использовать jQuery aci-tree plugin в директиве angularjs... Спасибо заранее!

Indhu 29 сен. 2016, в 15:41

Источник

0

дайте мне знать, если мои предположения верны, вы хотите создать собственную директиву angularjs, которая будет работать как оболочка acoderinsights.ro/source/aciTree/aciTree-radio.html ?
MD. Jahidul Islam 29 сен. 2016, в 13:03
0

Вы можете искать так много вопросов, как этот. Смешивание компонентов jQuery с вашим угловым приложением - это боль в шее. Избегайте этого, если можете. Обычно вы можете найти аналогичный компонент, который является родным угловым. Если вы не можете, вы можете собрать ответ, выполнив поиск SO.
jbrown 29 сен. 2016, в 13:07
0

@jbrown прав. однако, если вам действительно нужна директива-оболочка для плагина, в Интернете есть много ресурсов. может быть, вы найдете что-то полезное в bencentra.com/code/2015/09/29/…
MD. Jahidul Islam 29 сен. 2016, в 13:11
0

Спасибо за ваши предложения. Тем не менее мне нужно идти вперед с этой инъекцией jquery, так как он имеет лучший интерфейс, чем угловой компонент дерева js. Я стараюсь изо всех сил. Надеюсь скоро встретимся с ответом. @jbrown, что подразумевается под SO?
Indhu 29 сен. 2016, в 13:38
0

Переполнение стека :)
jbrown 29 сен. 2016, в 13:48
0

@ jbrown спасибо ...
Indhu 29 сен. 2016, в 14:09

Показать ещё 4 комментария

Теги:

angularjs

angularjs-directive

acitree

1 ответ

Ещё вопросы

дайте мне знать, если мои предположения верны, вы хотите создать собственную директиву angularjs, которая будет работать как оболочка acoderinsights.ro/source/aciTree/aciTree-radio.html ?
Вы можете искать так много вопросов, как этот. Смешивание компонентов jQuery с вашим угловым приложением - это боль в шее. Избегайте этого, если можете. Обычно вы можете найти аналогичный компонент, который является родным угловым. Если вы не можете, вы можете собрать ответ, выполнив поиск SO.
@jbrown прав. однако, если вам действительно нужна директива-оболочка для плагина, в Интернете есть много ресурсов. может быть, вы найдете что-то полезное в bencentra.com/code/2015/09/29/…
Спасибо за ваши предложения. Тем не менее мне нужно идти вперед с этой инъекцией jquery, так как он имеет лучший интерфейс, чем угловой компонент дерева js. Я стараюсь изо всех сил. Надеюсь скоро встретимся с ответом. @jbrown, что подразумевается под SO?

Indhu · Accepted Answer · 2016-09-30T05-00-00.000Z

После долгой попытки я получаю решение и кажется, что он работает нормально. После включения необходимого файла acitree include, здесь я написал директиву, чтобы включить acitree в угловые js.

.directive('aciTree', function($compile) {
  return {
    restrict: 'A',
    scope: {
      content: '='
    },
    link: function (scope, element) {
      scope.$watch('content', function () {
        scope.checkTreeEvent = function(event, api, item, eventName, options) { 
            var id = api.getId(item);
            switch (eventName) {                
                case 'checked':
                    break;
                case 'unchecked':
                    break;
            }    
        }
        if (scope.content) {
          element.aciTree(scope.content).bind('acitree', scope.checkTreeEvent);
        }
      });
    }
  };
})

Включил следующий код на странице html:

<div id="tree" ng-show="!errorMsg" aci-tree content="options" class="aciTree" style="height:265px;overflow:auto;"></div>

JSON для дерева может быть включен в контроллер следующим образом:

var data = [{
        "id":101,
        "label":"Total Vehicle Range",
        "inode":true,
        "checkbox":false,
        "radio":false,
        "branch":[{
            "id":102,
            "label":"75 miles",
            "inode":false,
            "checkbox":false,
            "radio":true
        },
        {
            "id":103,
            "label":"300 miles",
            "inode":false,
            "checkbox":false,
            "radio":true
        },
        {
            "id":104,
            "label":"500 miles",
            "inode":false,
            "checkbox":false,
            "radio":true
        },
        {
            "id":105,
            "label":"700 miles",
            "inode":false,
            "checkbox":false,
            "radio":true
        }]
    }];
scope.options = {
              rootData: data,
              checkbox: true
            };

Надеюсь, это поможет кому-то !!!!