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和數據綁定

回答

相關問題