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

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 方法（自定义选择框下拉样式库）。

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

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

问题： 如何在 Angular 中完成数据绑定后触发操作？

编辑 - 我创建了一个指令并修改了我的 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',
                    };
                  })