Question

我正在构建一个包含Chosen列表的Angular 1.5组件，需要通过在jQuery元素上调用.chosen（）来初始化它。我可以使用$ postLink生命周期回调，以及$（'。selected-select'）。selected（）之类的东西，它可以正常工作。但是，我可以预期有人在同一页面上使用该组件的多个实例，因此使用类选择器不一定会获得所需的组件。

我尝试使用id选择器，通过在HTML中为某个人分配给组件的ID添加前缀。例如，我可以使用类似<chosen-select id="roles"></chosen-select>的组件，如果有<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 });
        });
    };
  }

Answer 1

我意识到我可以使用分层选择器来解决问题。在$ postLink函数中，引用$（＆＃34;＃＆＃34; + vm.id +＆＃34; .chosen-select＆＃34;）完全符合我的要求，将选择范围缩小到只有是具有指定id的元素的后代。

AngularJS 1.5组件$ postLink和数据绑定

1 个答案: