Bir açısal program akordeonunu programlı olarak kontrol etmenin iyi bir yolu nedir?

Question

http://angular-ui.github.com/bootstrap/ akordeon direktifini kullanıyorum ve akordeonlar açılıp kapanırken daha fazla kontrol sahibi olmam gerekiyor.

Daha kesin olmak gerekirse, akordeon grubunun içinde, ana akordeonunu kapatacak ve bir sonraki pencereyi açacak bir düğüme ihtiyacım var (bu yüzden temelde diğerlerinin doğru olarak ayarlanması durumunda bir sonraki üstbilginin tıklanmasının ne yapacağını taklit etmesi gerekir). Ayrıca bir akordeon kapatılabilir ve bir sonraki açmak için izin vermeden önce bazı doğrulama yapmak gerekir ve aynı zamanda akordeon başlıkları üzerinde tıklama olayları için bu kadar tel gerekir.

Açısal olarak oldukça yeni ve şu anda bir uygulamayı Backbone + JQuery'den Angular'e yeniden yazıyoruz. Backbone versiyonunda Twitter Bootstrap akordeonlarını kullanıyorduk ve JQuery kullanarak açıp kapatıyorduk. Bunu yapmaya devam edebilirken JQuery DOM manipülasyonundan tamamen kurtulmayı tercih ederim, bu yüzden buna saf bir açısal çözüm arıyorum. Ben doğrulama açısından yapmaya çalıştık ne

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

ve benim denetleyicisi

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

Bu açıkça DOM eleman olarak işe yaramadı direktif ve yerine tıklama işleyici asla eklenmez. Kaynak kodun üzerinden geçtim (ve çok iyi belgelenmemiş birkaç özellik buldum) ama bu özel sorunu çözmeye bile başlayacağım bir zarara uğradım. Açısal-ui'yi unutmayı düşünüyordum ve bu işlevselliği akordeon direktifine eklemeyi denedim, ancak bunu daha güzel olacak bir yönerge değiştirmeden başarabilirsem.

Answer 1

accordion-group'da, bindable bir ifadeye işaret eden is-open özniteliği vardır. Eski .:

<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> 

ve işçi, programlama yoluyla akordeon öğeleri kontrol edebilirsiniz bu ifadeyi kullanarak buraya düşmek: @ pkozlowski.opensource tarafından çözüm çalışmıyor kim için http://plnkr.co/edit/DepnVH?p=preview

Answer 2

(me örneğin) size bileşeni sadece kapatılacak CSS'yi kabul etmeye zorlayabilir (geçiş olmadan).

Teori: Köşeli yönerge, standart HTML'ye, temel olarak CSS stillerinin akordeon görüntüsünü verdiği div öğelerine genişletilir. .panel-collapse sınıfına sahip div, akordeon grup elemanının gövdesidir. İkinci sınıfını .in'dan .collapse'a, aşağıda görüldüğü gibi birkaç değişiklikle birlikte değiştirebilirsiniz.

Kodu: Biz Açısal bahsediyoruz gibi

$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'); 
       } 

      } 
     } 
    }; 

, bir ng-repeat etiketi üzerinden akordeon ürettiğini çok mümkündür. Bu durumda da benzer elemanlar için kimliklerini oluşturabilir: Bir Gelincik modeli Kullanıcı Verilen

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

ben veriyorum id user._id değil ama önünde eklenen 'KULLANICI' olduğunu fark. Bunun nedeni Mongoose'un nümerik olarak başlayabilmesi ve sorguSelector'ın böyle bir şey yapmamasıdır;