我目前正在尝试构建一个 AngularJS 应用程序，我正在使用 jQuery UI Accordion 控件。

问题是，在我的 AngularJS 服务完成从服务器加载数据之前 启动了 jQuery UI Accordion 。换句话说: Accordion 在启动时没有任何数据，因此在填充来自 AngularJS 的数据时不显示。

View 看起来像这样:

<!-- Pretty standard accordion markup omitted -->
$("#b2b-line-accordion").togglepanels();

我的 AngularJS Controller 看起来像这样:

app.controller('orderController', function ($scope, orderService, userService) {
// Constructor for this controller
init();

function init() {
    $scope.selected = {};
    $scope.totalSum = 0.00;
    $scope.shippingDate = "";
    $scope.selectedShippingAddress = "";
    $scope.orderComment = "";
    $scope.agreements = false;
    $scope.passwordResetSuccess = false;
    $scope.passwordResetError = true;

    userService.getCurrentUser(2).then(function (response) {
        $scope.user = response.data;

        orderService.getProductCategoriesWithProducts($scope.user).then(function (d) {
            $scope.categories = d.data;
        });
    });
}

// Other methods omitted
});

我的 AngularJS 服务如下所示:

app.service('orderService', function ($http) {
    this.getProductCategoriesWithProducts = function (user) {
        return $http.post('url to my service', user);
    };
});

app.service('userService', function ($http) {
    this.getCurrentUser = function(companyId) {
        return $http.get('url to my service' + companyId + '.aspx');
    };

    this.resetPassword = function() {
        return true;
    };
});

有什么方法可以让 Accordion “等待”初始化，直到数据从服务返回？ :-)

提前致谢!

更新

我尝试链接这些方法并添加了一些日志记录，看起来 Accordion 实际上是在从服务返回 JSON 后启动的。

    userService.getCurrentUser(2).then(function(response) {
        $scope.user = response.data;
    }).then(function() {
        orderService.getProductCategoriesWithProducts($scope.user).then(function(d) {
            $scope.categories = d.data;
            console.log("categories loaded");
        }).then(function () {
            $("#b2b-line-accordion").accordion();
            console.log("accordion loaded");
        });
    });

但是，它不显示 Accordion :-( 第一个 Accordion div 在生成的 DOM 中看起来不错:

<div id="b2b-line-accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> 
    ... 
</div>

但是标记的其余部分(使用 Angular 进行数据绑定(bind))并未启动。

完整标记:

<div id="b2b-line-accordion">
    <div ng-repeat="productCategory in categories">
        <h3>{{ productCategory.CategoryName }}</h3>
        <div class="b2b-line-wrapper">
            <table>
                <tr>
                      <th>Betegnelse</th>
                      <th>Str.</th>
                      <th>Enhed</th>
                      <th>HF varenr.</th>
                      <th>Antal</th>
                      <th>Bemærkninger</th>
                      <th>Beløb</th>
                </tr>
                <tr ng-repeat="product in productCategory.Products">
                    <td>{{ product.ItemGroupName }}</td>
                    <td>{{ product.ItemAttribute }}</td>
                    <td>
                        <select ng-model="product.SelectedVariant"
                                ng-options="variant as variant.VariantUnit for variant in product.Variants"
                                ng-init="product.SelectedVariant = product.Variants[0]"
                                ng-change="calculateLinePrice(product); calculateTotalPrice();">
                        </select>
                    </td>
                    <td>{{ product.ItemNumber }}</td>
                    <td class="line-amount">
                        <span class="ensure-number-label" ng-show="product.IsNumOfSelectedItemsValid">Indtast venligst et tal</span>
                        <input type="number" class="line-amount" name="amount" min="0" ng-change="ensureNumber(product); calculateLinePrice(product); calculateTotalPrice();" ng-model="product.NumOfSelectedItems" value="{{ product.NumOfSelectedItems }}" />
                    <td>
                       <input type="text" name="line-comments" ng-model="product.UserComment" value="{{ product.UserComment }}" /></td>
                    <td><span class="line-sum">{{ product.LinePrice | currency:"" }}</span></td>
                 </tr>
           </table>
   </div>
 </div>
</div>

解决方案

我终于找到了解决这个问题的方法!我不完全确定它是否那么漂亮以及它是否是 Angular 做事的方式(我猜不是)

使用以下代码创建指令:

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

所以基本上当 DOM 准备就绪并且类别数组更改时(它在数据加载后发生)，我将启动 jQuery UI Accordion 。

非常感谢@Sgoldy 在这里为我指明了正确的方向!

最佳答案

是的，你需要一个指令，你可以处理这种更 Angular 方式!

在HTML中定义指令

<div ui-accordion="accordionData" ></div>

从您的服务返回promise并将promise传递给指令。

在 Controller 中

$scope.accordionData = myService.getAccordionData();

ui-accordion 指令看起来像

.directive('uiAccordion', function($timeout) {
return {
  scope:{
    myAccordionData: '=uiAccordion'
  },
  template: '<div ng-repeat="item in myData"><h3 ng-bind="item.title"></h3><div><p ng-bind="item.data"></p></div></div>',
  link: function(scope, element) {
    scope.myAccordionData.then(function(data) {
      scope.myData = data;
      generateAccordion();
    });

    var generateAccordion = function() {
      $timeout(function() {   //<--- used $timeout to make sure ng-repeat is REALLY finished
        $(element).accordion({
          header: "> div > h3"
        });
       });
     }
   }
  }
})

当您的服务调用成功时然后您就可以创建 Accordion 了。在这里你可以定义你自己的accordion-template like

<div ng-repeat="item in myData">
  <h3 ng-bind="item.title"></h3>
  <div>
     <p ng-bind="item.data"></p>
  </div>
</div>

模板与您的模型数据 myData 绑定(bind)。我在模板中使用 ng-repeat 来创建 accordion-header 和 accordion-body HTML。

在 generateAccordion 方法中，我使用 $timeout 来确保 ng-repeat 真正完成渲染，因为 $timeout 将在当前摘要周期结束时执行。

检查 Demo

关于javascript - 在 AngularJS 服务调用后填充 jQuery UI Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21190594/