javascript - 如何使用 Angular 在 JQueryUI Accordion 中填充数据？

Question

在下面的代码示例中，accordion 指令确保 Angular 首先完成，然后允许 JQueryUI 使用标记中提供的值呈现 Accordion。但它没有按预期工作。我正在关注这个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>

以下是 Accordion 指令的实现`

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 fiddle https://jsfiddle.net/7028yLdh/1/

Answer 1

$scope.$watch('users',/* ... */) 除非数组更改为不同的对象，否则不会被调用。因此，您的 elem.accordion() 在 DOM 编译后并未运行。相反，您可以观察users.length来检测数组中的新元素。

此外，Angular 指令链接函数内不需要 $(document).ready 。

还有一个陷阱是您必须调用 elem.accordion('destroy') 并在对数组进行后续更改时重新构建 Accordion。默认情况下，我的解决方案只会构建一次 Accordion 一次，除非您提供 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();
            });
          }
        }
    };
});