Я создаю компонент Angular 1.5, который завершает список Chosen, который необходимо инициализировать, вызвав .chosen() в элементе jQuery. Я могу сделать это, используя обратный вызов жизненного цикла $ postLink, и что-то вроде $ ('. Selected-select'). Selected(), который отлично работает. Тем не менее, я могу предвидеть, что кто-то использует несколько экземпляров компонента на одной странице, поэтому использование селектора классов не обязательно получит нужный компонент.
Вместо этого я попытался использовать селектор 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 });
});
};
}