angularjs - 如何在 Angular js 指令中使用 jquery aci 树插件

Question

我必须在 angular js 中使用 acitree jquery 插件（来源：http ://acoderinsights.ro/source/aciTree/aciTree-radio.html ），以便列出我所有的树。

帮助我如何在 angularjs 指令中使用 jquery aci-tree 插件...在此先感谢！

Answer 1

经过长时间的尝试，我获得了一个解决方案，并且似乎工作正常。在包含必要的 acitree 包含文件后，我在这里编写了指令以在 angular js 中包含 acitree。

.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
            };

希望这对某人有帮助！！！！