Question

我想在angularJS指令中实现SelectBoxIt。这是我的指令模板html片段（lookup.template.html）：

<select class="selectBoxit" ng-model="ngModel">
    <option value="" disabled> {{placeholder}}</option>
    <option value='{{a.LookupCode}}' ng-repeat='a in lookups'>{{a.Name}}</option>
</select>

隔离范围指令：

.directive('lookup', function(){
        return {
            restrict: 'E',
            scope: {
                lookups: "=lookups",
                ngModel: "=ngModel"
            },
            templateUrl: 'templates/lookup.template.html',
            link: function (scope, element, attrs) {
                scope.placeholder = attrs['placeholder'];
                $(".selectBoxit").selectBoxIt().on('open', function()
                {
//ScrollBar
$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
                });
            }
        }
    });

查找控制器：

 .controller('LookupController', function($scope){
        $scope.schoolTypeCode = 'GNR';
        $scope.schoolTypes = [{  Name: "Kinder Garten",  LookupCode: "KG" },
            { Name: "Elemetary",  LookupCode: "ELM" },
            { Name: "High School",   LookupCode: "HSC" },
            { Name: "Preparatory",   LookupCode: "PRP" },
            { Name: "General",   LookupCode: "GNR" },
            {  Name: "Distance",  LookupCode: "DST"  }];
    });

最后使用指令查看：

<lookup  id="cboSchoolType" lookups="schoolTypes"
                                 ng-model="SchoolTypeCode" placeholder="Select School Type"></lookup>

SelectBoxIt初始化工作正常，但我注意到两个问题。首先，未分配默认值（ngModel），其次，在角度重复完成填充选项之前进行初始化。这将导致空选择列表以及单击时出现以下错误消息：

未捕获的TypeError：无法读取未定义的属性'list'

那么，有没有其他方法可以设置默认值并在使用angular repeat填充选项后触发SelectBoxIt初始化？

感谢。

Answer 1

尝试“下拉列表”而不是“列表”

所以而不是

$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();

在事件功能中尝试此行

$(this).data('selectBoxSelectBoxIt').dropdown.perfectScrollbar();

在AngularJS指令中使用SelectBoxIt

1 个答案: