Question

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

请教我如何在angularjs指令中使用jquery aci-tree插件...提前致谢!!

Answer 1

经过长时间的尝试，我获得了一个解决方案，似乎工作正常。包括必要的acitree包含文件后，在这里我写了指令，在角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
            };

希望这有助于某人!!!!

如何在angular js指令中使用jquery aci树插件

1 个答案: