AngularJS 1.5组件$ postLink和数据绑定

我正在构建一个包装选择列表的组件，该列表需要通过调用jQuery元素上的.chosen（）进行初始化。我可以使用$ postLink生命周期回调来执行此操作，并且可以使用$（'。chosen-select'）。chosen（），这很好。但是，我可以预料到有人在同一页面上使用组件的多个实例，因此使用类选择器不一定会获得所需的组件。

我尝试使用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 }); 
     }); 
    }; 
    }

来源

2016-09-13 ScottG

我意识到我可以用一个层次选择来解决这个问题。在$ postLink函数中，引用$（“＃”+ vm.id +“.chosen-select”）通过将选择范围缩小为仅具有指定id的元素的后代的元素而完全符合我的要求。

来源

2016-09-20 14:32:35 ScottG

AngularJS 1.5组件$ postLink和数据绑定

回答

相关问题