角度アコーディオンをプログラムで制御するにはどうすればよいでしょうか？

Question

私はhttp://angular-ui.github.com/bootstrap/のアコーディオン・ディレクティブを使用しています。アコーディオンを開閉するタイミングをより詳細に制御する必要があります。

より正確には、親アコーディオンを閉じて次のアコーディオンを開くボタンが必要です（close-othersがtrueに設定されている場合、次のヘッダーをクリックすると基本的には同じようになります）。 アコーディオンを閉じ、次のアコーディオンを開くことを許可する前に、いくつかの検証を行う必要があります。また、これをアコーディオンヘッダーのクリックイベントまで配線する必要があります。

私はかなり新しく、私たちは現在、Backbone + JQueryからAngularにアプリケーションを書き直しています。バックボーン版では、Twitter Bootstrapアコーディオンを使用していましたが、JQueryを使用してそれらを開閉していました。私たちはこれをやり続けることができますが、JQueryのDOM操作を完全に取り除いて、純粋な角度の解決策を探しています。私は検証の観点で行うことを試みた何

は

<accordion-group ng-click="close($event)"> 

で、私のコントローラで

event.preventDefault(); 
    event.stopPropagation(); 

これは明らかにDOM要素として動作しませんでしたがディレクティブと置き換えられますクリックハンドラは決して追加されません。私はソースコードを見てきました（そして、文書化されていない機能がいくつか見つかりました）が、この特定の課題をどこから解決するのかについては悩んでいます。私はangle-uiをフォークすることを検討していましたが、この機能をアコーディオン・ディレクティブに追加しようとしましたが、これをもっとうまくいくディレクティブに変更することなく達成できればと思います。

Answer 1

バインド可能な式を指しているaccordion-groupには、is-openという属性があります。例：

<div ng-controller="AccordionDemoCtrl"> 
    <accordion> 
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open"> 
     {{group.content}} 
    </accordion-group>  
    </accordion> 
    <button class="btn" ng-click="groups[0].open = !groups[0].open">Toggle first open</button> 
    <button class="btn" ng-click="groups[1].open = !groups[1].open">Toggle second open</button> 
</div> 

、作業、あなたがプログラム的にアコーディオンのアイテムを制御することができ、この式を使用することにより、ここplunk：@のpkozlowski.opensourceによって溶液が動作していない誰のためにhttp://plnkr.co/edit/DepnVH?p=preview

Answer 2

（私の例）あなたをコンポーネントは、それを閉じるCSSを受け入れるように強制することができます（移行はありません）。

The Theory：角度指示は標準的なHTMLのdiv要素に展開され、CSSスタイルではアコーディオンの外観が得られます。クラス.panel-collapseのdivは、accordion-group要素の本体です。 2番目のクラスを.inから.collapseに変更することができます。

コード：

$scope.toggleOpen = function(project) { 

     var id = '<The ID of the accordion-group you want to close>'; 
     var elements = angular.element($document[0].querySelector('#'+id)); 
     var children = elements.children(); 

     for(var i = 0; i < children.length; i++) { 

      var child = angular.element(children[i]); 

      if(child.hasClass('panel-collapse')) { 
       if(child.hasClass('in')) { // it is open 
        child.removeClass('in'); 
        child.addClass('collapse'); 
        child.css('height', '0px'); 
       } else { // it is closed 
        child.addClass('in'); 
        child.removeClass('collapse'); 
        child.css('height', 'auto'); 
       } 

      } 
     } 
    }; 

我々は角度について話しているとして、あなたがNGリピートタグを通じてアコーディオンを生成していることは非常に可能です。この場合、あなたはまたのような要素のためのIDを生成することができます：マングースモデルユーザーを考えると

<accordion-group ng-repeat="user in users" 
       is-disabled="user.projects.length == 0" 
       id="USER{{user._id}}"> 

は、私が与えているIDがuser._idではなく、前に追加「USER」を持っていることに気づきます。これは、Mongooseが数値で開始するidを生成し、querySelectorがそれを気に入らないためです;-) figureへ！