Question

在下面的代码示例中， accordion 指令确保首先完成角度，然后允许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();
              });
            }
          });
        });
      }
  };
});

JS小提琴 https://jsfiddle.net/7028yLdh/1/

Answer 1

除非Array更改为其他对象，否则不会调用

$scope.$watch('users', /* ... */)。所以编译DOM后你的elem.accordion()没有运行。相反，您可以观察users.length以检测阵列中的新元素。

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

另一个缺陷是你必须调用elem.accordion('destroy')并在对阵列的后续更改中重新构建手风琴。我的解决方案默认只会构建一次手风琴，除非您提供watch="someVariable"来监视更改。

小提琴：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();
            });
          }
        }
    };
});

如何使用Angular在JQueryUI手风琴中填充数据？

1 个答案: