2016-09-29 11 views
0

私はすべてのツリーを表示するために、角度jでacitree jquery plugin(出典:http://acoderinsights.ro/source/aciTree/aciTree-radio.html)を使用する必要があります。jquery aci tree pluginをangs jsディレクティブで使用する方法

jquery aci-treeプラグインをangularjsディレクティブで使用する方法を助けてください...事前に感謝!!

+0

私の推測が正しいかどうか教えてください。http://acoderinsights.ro/source/aciTree/aciTree-radio.htmlのラッパーとして動作するカスタムのangularjs指示文を作成したいのですか? –

+0

あなたはこのように多くの質問のためにSOを検索することができます。 jQueryコンポーネントを角度アプリにブレンドすると、首に痛みがあります。できればそれを避けてください。通常、ネイティブな角度の同様のコンポーネントを見つけることができます。あなたができないのであれば、SOを検索して答えをまとめることができます。 – jbrown

+0

@jbrownが正しいです。しかし、実際にプラグインのラッパーディレクティブが必要な場合は、インターネットに多くのリソースがあります。 https://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html –

答えて

0

長い試行の後、私は解決策を得て、それがうまく動作しているようです。必要なacitreeインクルードファイルを含めて、ここで私はangitに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 
      }; 

希望を、これが誰かを助け!!!!

関連する問題