我正在编写一个自定义指令来将一个 html 选择元素绑定到一个无序列表。
它适用于静态选择元素。
但是,我无法使其与动态选择一起使用。有没有办法让我的指令检索由 ng-options 或 ng-repeat 指令生成的选项?
我在这里有一个例子:http: //jsfiddle.net/fjbyq/3/
angular.module('myApp', [])
.directive('taskFilterChoices', function() {
return {
transclude: true,
replace: true,
template: '<div class="listToggleBox listType" data-ng-transclude><ul class="choicefilterList"><li data-ng-repeat="option in options"> <a href="" class="taskFilterLink" data-value="{{ option.value }}">{{ option.text }}</a> </li> </ul> </div>',
scope: {},
link: function(scope, element, attrs) {
var _select = element.find('select'),
_selectOptions = [];
_select.hide();
_select.find('option').each(function(i, option) {
var _optionObj = {
value: option.value,
text: option.innerText
};
_selectOptions.push(_optionObj);
});
scope.options = _selectOptions;
}
};
})
.directive('taskFilterLink', function() {
return {
restrict: 'C',
link: function(scope, element) {
$(element).on('click', function(e){
e.preventDefault();
var _select = $(this).closest('.listToggleBox').find('select');
_select.val($(this).data('value')).triggerHandler('change');
});
}
};
});
谢谢