在 ng-repeat 中多次使用 AngularJs 组件

Question

我在 angularjs 中有一个下拉组件，在使用时可以正常工作并且选择了值，但是如果我在 ng-repeat 中多次使用相同的组件，则会呈现下拉列表但未选择值。我正在使用以下代码：

JS 文件：

angular.module('mainApp').component('inputSelectComponent', {
    templateUrl : 'sys/templates/input-select.template.html',
    bindings : {
        ngModel : '='
    },
    controller: ['$scope', '$element', '$http', 'translate', 'apiServer', 'session', 'EVENTS', function compCategoriesDropdownController($scope, $element, $http, translate, apiServer, session, EVENTS) {
        
        var _select = $element.find('select');

        $scope.options = JSON.parse($element.attr('options'));

        setTimeout(function(){
            $element.find('select').selectize({});
        }, 0);
        
        $scope.$watch('$ctrl.ngModel', function(e){
            var selectize = _select[0].selectize;
            if (typeof(selectize) !== 'undefined') {
                setTimeout(function(){
                        selectize.setValue(e);
                }, 0);
            }
        });         
        
        $scope.$watch('$element.attr', function(e){         
            $scope.label = $element.attr('label');
            if ($element.attr('disabled') === 'disabled'){
                _select.attr('disabled', 'disabled');
            }
        });     
        
        $element.find('select').on('change', function(e){
            $scope.$ctrl.ngModel = e.target.value;
        });

    }]
});

模板文件：

<label class="col-form-label">{{label}}</label> 
<select class="cat-drop{{(error!=null)? ' not-validated' :''}}">
    <option ng-repeat="(key, value) in options" value="{{key}}">    
        {{value}}
    </option>   
</select>

我是这样称呼它的：

<div ng-repeat="relatedproduct in relatedproductsData">
    <span class="serial-number">{{ $index + 1 }}.</span>
    <div class="form-group row">                        
        <input-select-component ng-model="relatedproduct.item_type" class="input-component col-sm-2" label="{{t('related_products_item_type')}}" options='{"2": "2 - For Product", "3": "3 - For Category"}'></input-select-component>      
    </div>                                                      
</div>

感谢任何帮助！

Answer 1

我使用指令而不是组件。 文件说：

组件只控制自己的视图和数据：组件不应该修改任何超出自己范围的数据或 DOM。 ..

使用指令允许您在指令中的选择组件上使用 ng-model="ngModel" 并直接更改值。

 angular.module('mainApp').directive('inputSelectComponent', function () {

            return {
                template: `<label class="col-form-label">{{label}}</label> 
                            <select class="cat-drop{{(error!=null)? ' not-validated' :''}}" ng-model="ngModel">
                                <option ng-repeat="(key, value) in options" value="{{key}}">    
                                    {{value}}
                                </option>   
                            </select>`,
                scope: {
                    ngModel: '=',
                    options: '=',
                }

            }

        });

它确实在调用者中起作用：

<div ng-repeat="relatedproduct in [{ item_type : '' }, {item_type : ''}, { item_type: '' }]">
            <span class="serial-number">{{ relatedproduct }}.</span>
            <div class="form-group row">
                <input-select-component ng-model="relatedproduct.item_type" 
                                        class="input-component col-sm-2" 
                                        label="{{t('related_products_item_type')}}" 
                                        options='{"2": "2 - For Product", "3": "3 - For Category"}'></input-select-component>
            </div>
        </div>

祝你好运！

Answer 2

尝试使用$timeout 代替 setTimeout。也许是因为 angularJS 摘要...