我有一个指令,它的模板中有另一个指令.
<nv-select ng-model="from" ng-options="item.name as item for item in from"></nv-select>
在这里,我尝试将表达式传递给child指令的ng-options.不幸的是,总是给我以下错误
Error: Syntax Error: Token 'as' is an unexpected token at column ...
如果我将表达式放在子指令的选择的ng-options中,它就可以正常工作.我的nv-select指令如下所示：
function () {
return {
restrict: 'E',// restrict to elements
replace: true,transclude: true,scope: {
ngModel: "=",ngOptions: "&",placeholder: '@'
},template: [
'<div class="nv-select">','<select ng-model="ngModel" ng-options="ngOptions" ng-transclude></select>','<span class="icon suffix-icon-down">{{ text || placeholder }}</span>','</div>'
].join(''),link: function (scope,elem,attr) {
var select = elem.find('select'),copyValues = function (e) {
if (e.options) {
scope.text = angular.element(e.options[e.selectedIndex]).text();
}
};
copyValues(elem[0]);
elem.bind('click',function (event) {
elem.toggleClass('active');
});
select.bind('change',function (event) {
scope.$apply(function () {
copyValues(event.target);
});
});
}
};
};
nv-select基本上只是< select>的包装器.启用自定义样式.
传递表达式时是否需要特别考虑？我究竟做错了什么？
解决方法
我们来看看如何在AngularJS源中实现ngOptions.在这里我们可以找到表达式的regexp模式：
var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w\d]*)|(?:\(\s*([\$\w][\$\w\d]*)\s*,\s*([\$\w][\$\w\d]*)\s*\)))\s+in\s+(.*)$/
然后
if (! (match = optionsExp.match(NG_OPTIONS_REGEXP))) {
throw Error(
"Expected ngOptions in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_'" +
" but got '" + optionsExp + "'.");
}
var displayFn = $parse(match[2] || match[1]),valueName = match[4] || match[6],keyName = match[5],groupByFn = $parse(match[3] || ''),valueFn = $parse(match[2] ? match[1] : valueName),valuesFn = $parse(match[7]);
所以你可以使用它或写新的.
