角1.5.8 -当角完成将数据绑定到元素时，如何执行操作？

Question

我有一个有角度的应用程序，在这个应用程序中，我希望等到数据被绑定到一个选择下拉时，直到我将jquery方法应用到选择下拉列表之前。

在前面的相关问题中，我能够使用以下代码成功地填充下拉列表。

 <select name="shippingState" id="shippingState" ng-model="accountAddresses.shippingState"  ng-options ="state.abbreviation for state in states track by state.abbreviation" class="state form-control" size="1">
                       </select>

AngularJS (1.5.8) - How do I populate a select option list directly from within controller that gets a json object?

现在我想应用jquery方法(一个定制的选择框下拉样式库)。

当数据加载时，我可以在浏览器控制台中手动应用该方法。问题是，我只能在浏览器控制台中手动执行操作。

当下拉数据正在获取时，我无法在角度上运行相同的方法。

问题:当数据绑定以角度结束时，如何触发操作？

编辑-我创建了一个指令并修改了我的html以触发指令。

不过，我仍然没有得到一个自定义样式元素。

链接到根控制器的指令

  directive('onDataBind', function (id) {
                        alert(id);
                          function link(elem, id) {
                            elem.ready(function(id){
                              $scope.CreateDropDown(id);
                              });
                            }
                          })

HTML修改

           <select name="billingState" id="billingState" ng-model="accountAddresses.billingState"  ng-options ="state.abbreviation for state in states track by state.abbreviation" on-data-bind="CreateDropDown('billingState')" class="state form-control" size="1">
           </select>

在作用域级别创建下拉列表

   $scope.CreateDropDown = function(id){
      $("#"+id).selectbox();
      //selectbox is the following library - https://github.com/olivM/jQuery-Selectbox
    }

Answer 1

下面的指令代码帮助解决了这个问题。我按照建议使用了指令和超时。

directive('onDataBind', function () {
                  function link(scope, elem) {
                    var id = elem.attr("id");
                    elem.ready(function(){
                     setTimeout(function () {
                       $("#"+id).selectbox();
                     }, 1000);
                      //$('#'+id + ' .sbHolder > .sbOptions').wrap("<div class='optionsDiv'></div>");
                      //$("#"+id + " .sbHolder > a.sbToggle, "+id+" + .sbHolder a.sbSelector").wrapAll("<div class='selectDiv'></div>");
                    })(id);
                    }
                    return {
                      link: link,
                      restrict: 'A',
                    };
                  })