在AngularJS服务调用之后填充jQuery UI手风琴

Question

我正在尝试构建一个AngularJS应用程序,我正在使用jQuery UI手风琴控件.

问题是,jQuery UI手风琴是在我的AngularJS服务从服务器加载数据之前启动的.换句话说:手风琴在启动时没有任何数据,因此在填充AngularJS的数据时不会显示.

该视图如下所示:

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

我的AngularJS控制器看起来像这样:

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

有没有办法告诉手风琴"等待"初始化,直到从服务返回数据？:-)

提前致谢!

更新

我尝试链接方法并添加一些日志记录,似乎手风琴实际上是在从服务返回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");
        });
    });

但是,它不显示手风琴:-(第一个手风琴div在生成的DOM中看起来很好:

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

但其余的标记(用角度数据绑定)并未启动.

完整标记:

<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手风琴.

非常感谢@Sgoldy指点我这里正确的方向!

Answer 1

是的,你需要一个directive,你可以处理这种更有棱角的方式!

在HTML定义指令

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

promise从您的返回service并传递promise给指令.

在控制器中

$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"
        });
       });
     }
   }
  }
})

当您的服务电话成功时,then您将创建您的手风琴.在这里你可以定义自己的accordion-template喜欢

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

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

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

检查 Demo