AngularJS 1.5组件$postLink和数据绑定

Question

我正在构建一个Angular 1.5的组件来包装selected list，它需要通过在jQuery元素上调用. Chosen()来初始化。我可以使用$postLink生命周期回调，以及类似$('.chosen-select').chosen()的东西，它工作得很好。但是，我可以预见有人会在同一页面上使用该组件的多个实例，因此使用类选择器不一定会得到您想要的组件。

我尝试使用一个id选择器代替，通过添加一个前缀到任何id有人分配给HTML中的组件。例如，我可以使用<chosen-select id="roles"></chosen-select>这样的组件，如果在模板中有<select id="cs-{{$ctrl.id}}">(在控制器中，我绑定id: '@')。这一切都像预期的那样工作，除了在$postLink中，select元素已经创建(以及其他绑定，例如列出选项的绑定，已解决)，但id仍然是"cs-{{$ctrl.id}}"。在什么时候它变成了"cs-role"(当一切都设置好后，它就是DOM中的角色)?确保我正在访问属于该组件的对象的最佳方法是什么?

下面是组件代码，它可以工作:

模板:

<select id="cs-{{$ctrl.id}}" class="chosen-select"
    ng-options="(option.name || option) for option in $ctrl.options track by (option.id || option)"
    ng-model="$ctrl.result"
>
</select>

组件:

mymod.component('chosenSelect', {
  templateUrl: 'shared/components/chosenSelectComponent.html',
  controller: chosenSelectController,
  bindings: {
    id: '@',
    options: '<',
    config: '<?',
    selected: '<?',
    doChange: '&?'
  }
  });
  function chosenSelectController() {
    var vm = this;
    vm.result = vm.selected || vm.options[0];
    vm.$postLink = function() {
      // would like to use ("#cscomp-" + vm.id) to make sure it is unique,
      // but id doesn't seem to have been resolved yet in select element
      $(".chosen-select")
        .chosen(vm.config)
        .on('change', function(evt, params) {
          // parms.selected also holds result
          vm.doChange({ value: vm.result });
        });
    };
  }

Answer 1

我意识到我可以使用分层选择器来解决这个问题。在$postLink函数中，引用$("#" + vm。id + " .chosen-select")通过将选择范围缩小到仅为具有指定id的元素的后代元素来完成我想要的功能。