Angular 1.5.8——当Angular完成数据绑定到元素时，我该如何执行一个动作?

Question

我有一个angular应用程序，我想等到数据绑定到下拉选择，直到我应用一个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) -我如何直接从控制器中填充一个选择选项列表来获取json对象?

现在我想应用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',
                    };
                  })