如何在Angular指令中擴展自舉手風琴？

Question

在我的Angular指令中，我嘗試隱藏和顯示手風琴面板。問題是，當我通過代碼訪問手風琴時，手風琴打破了。

例如，當我這樣做：

$("#collapseOne").collapse('hide')

面板處於摺疊狀態，但在標題的鏈接不工作了，所以用戶無法展開面板。我也嘗試了諸如：

$("#collapseOne").removeClass('in'); 和 $("#collapseOne").hide();

但他們沒有工作。或者他們有相同的效果，或者根本不工作。

下面是HTML：

<div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
         Customer 
        </a> 
      </div> 
      <div id="collapseOne" class="accordion-body collapse"> 

       <div class="accordion-inner"> 
        Customer list 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
         My form 
       </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <form novalidate data-ng-submit="certificateFormSubmit()"> 
         Some form 
        </form> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
         Title for other content 
       </a> 
      </div> 
      <div id="collapseThree" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        Some other content 
       </div> 
      </div> 
     </div> 
    </div> 

，這是我的指令的簽名：我試圖創建一個小提琴

app.directive('certificateEdit', function ($q, ProductService, CustomerService, CertificateService) { 
    return { 
     restrict: 'E', 
     templateUrl: '/Certificate/Add', 
     scope: { 
      certificate: '=', 
      customerId: '=', 
      visible: '=', 
      onCertificateSaved: '&' 
     }, 
     controller: function ($scope, $element, $attrs) { 
      // based on the certificate attribute value, I want to expand a accordion panel 
     }); 

，但我不能讓小提琴工作。我花了兩個小時創建一個小提琴，但我不能得到指令工作..

Answer 1

您可以使用angular.element（jQuery選擇器在這裏） 現在你可以使用任何方法，因爲它返回你的元素作爲對象（jQuery對象）

Answer 2

您是否嘗試過使用angularjs-ui for bootstrap，它們是Twitter Bootstrap的Angular指令。