0

我正在构建一个包装选择列表的 Angular 1.5 组件，该组件需要通过在 jQuery 元素上调用 .chosen() 来初始化。我可以使用 $postLink 生命周期回调和 $('.chosen-select').chosen() 之类的方法来做到这一点，效果很好。但是，我可以预料到有人会在同一页面上使用组件的多个实例，因此使用类选择器不一定会获得您想要的组件。

我尝试改用 id 选择器，方法是为某人在 HTML 中分配给组件的任何 id 添加前缀。例如，如果有的话，我可能会<chosen-select id="roles"></chosen-select>在模板中使用类似 and的组件<select id="cs-{{$ctrl.id}}">（在控制器中，我绑定id: '@'）。这一切都按预期工作，除了在 $postLink 中创建了 select 元素（以及其他绑定，例如列出选项的绑定），但 id 仍然是“cs-{{$ctrl.id}}”。什么时候会变成“cs-roles”（当一切都设置好后，它在 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 });
        });
    };
  }
4

1 回答 1

0

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

于 2016-09-20T14:32:35.600 回答