角度を使用してJQueryUIアコーディオンでデータを取り込む方法は？

Question

次のコードサンプルでは、​​アコーディオンディレクティブは、最初に角が終了することを保証し、JQueryUIがタグ内の指定された値でアコーディオンをレンダリングできるようにします。しかし、期待どおりに動作していません。私はこれに続いてlinkです。

<div accordion> 
    <h3 ng-repeat-start="user in users" > 
    <a href="#">{{user.name}}</a> 
    </h3> 
    <div ng-repeat-end> 
     Name: {{user.name}}<br> 
     Type: {{user.type}}<br> 
    </div> 
</div> 

次のアコーディオンディレクティブです

app.directive('accordion', function ($timeout) { 
    return { 
    restrict: 'A', 
     link: function ($scope, $element, attrs) { 
     $(document).ready(function() { 
      $scope.$watch('users', function() { 
      if ($scope.users != null) { 
       $timeout(function(){ 
       $element.accordion(); 
       }); 
      } 
      }); 
     }); 
     } 
    }; 
}); 

implementation` JSフィドル https://jsfiddle.net/7028yLdh/1/

Answer 1

$scope.$watch('users', /* ... */)は、別のオブジェクトへの配列の変更がない限り呼ばれません。したがって、elem.accordion()は、DOMのコンパイル後に実行されていません。代わりにusers.lengthが配列の新しい要素を検出するのを見ることができます。

また、Angularディレクティブリンク関数内には$(document).readyは必要ありません。

もう1つの落とし穴は、elem.accordion('destroy')に電話し、その後の配列の変更でアコーディオンを再構築する必要があることです。変更を監視するためにwatch="someVariable"を指定しない限り、私のソリューションはデフォルトでアコーディオンを1回しか作成しません。

フィドル：https://jsfiddle.net/hk6wro4y/

HTML：

<!-- Will not update --> 
<div accordion><!-- content --></div> 

<!-- Will update --> 
<div accordion watch="users.length"><!-- content --></div> 

JS：

app.directive('accordion', function ($timeout) { 
    return { 
     link: function (scope, elem, attrs) {   
      if (attrs.watch) { 
      scope.$watch(attrs.watch, function() { 
       if (elem.hasClass('ui-accordion')) { 
       elem.accordion('destroy'); 
       } 
       elem.accordion(); 
      }); 
      } 
      else { 
      $timeout(function() { 
       elem.accordion(); 
      }); 
      } 
     } 
    }; 
});