Как заполнить данные в аккордеоне JQueryUI с помощью Angular?

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> 

Ниже директива аккордеон implementation`

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(); 
       }); 
      } 
      }); 
     }); 
     } 
    }; 
}); 

JS Скрипки https://jsfiddle.net/7028yLdh/1/

Answer 1

$scope.$watch('users', /* ... */) не будет вызван, если изменения массива к другому объекту. Таким образом, ваш elem.accordion() не работает после компиляции DOM. Вместо этого вы можете посмотреть users.length, чтобы обнаружить новые элементы в массиве.

Кроме того, $(document).ready не требуется внутри функций функции угловой директивной ссылки.

Еще одна ошибка заключается в том, что вы должны позвонить elem.accordion('destroy') и перестроить аккордеон при последующих изменениях в массиве. Мое решение будет только строить аккордеон один раз по умолчанию, если вы не дадите watch="someVariable" для просмотра изменений.

Fiddle: 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(); 
      }); 
      } 
     } 
    }; 
});