如何从自定义指令中的 ng-options 获取我编译的数组? [英] How can I get my compiled array from ng-options in a custom directive?
问题描述
我有一个自定义指令,我正在用它来装饰 <select ng-options="">
...
I have a custom directive which I am decorating a <select ng-options="">
with as such...
<select custom ng-model="selected" ng-options="o for o in values">
以 custom
作为我的指令,values
是一个简单的数组.这是我的实现...
with custom
as my directive and values
being a simple array. Here is my implementation...
<select custom ng-model="selected" ng-options="o for o in values">
<option value selected>uhh?</option>
</select>
<小时>
app.directive('custom', [function() {
return {
scope: {},
link: function(scope, elem, attrs) {
// how can I get my array of values here?
}
}
}])
app.controller('ctrl', ['$scope', function($scope) {
$scope.values = ['er', 'um', 'eh'];
}])
在我的 link
中,我可以看到它
Within my link
I can see it as such
console.log(attrs.ngOptions);
在这种情况下,它会注销文字 "o for o in values"
.我可以在我的 link
中以某种方式解析或编译它以获取数组吗?我知道如果我执行诸如 scope.$parent.values
之类的操作,我可以抓住它,但这似乎没有必要,我需要知道 "values"
的名称.我可能可以通过一些 hacky 感觉的字符串操作来定位它,但我希望有一种更直观的方法.
Which, in this case, logs out the literal "o for o in values"
. Can I somehow parse or compile this within my link
to get the array? I see I can grab it if I do something like scope.$parent.values
, but this seems unnecessary and I would need to know the name of "values"
. I can probably get it through some hacky feeling string manipulation to target it, but I am hoping there is a more intuitive way.
hacky 例如
var array = attrs.ngOptions.split(' ').pop(); // "values"
console.log(scope.$parent[array]);
旁注 - 在这个例子中限制为 AngularJS 1.2.x
Side note - constricted to AngularJS 1.2.x for this example
JSFiddle 链接 - 示例
推荐答案
从 Angular v1.4 开始,select
和 ngOptions
指令都没有提供 API 来获取数组导致 的项目,所以我们只剩下 2 个选择 - 1) 将
values
数组显式传递给 custom
指令作为属性值,或 2) 从 ng-options
的微语法派生.
As of Angular v1.4, neither select
nor ngOptions
directives provide an API to get the array of items that results in <option>
s, so we are only left with 2 choices - 1) pass the values
array explicitly to custom
directive as an attribute value, or 2) derive it from the micro-syntax of ng-options
.
使用#1 - 方法很简单.
With #1 - the approach is straightforward.
使用 #2 - 我们需要解析微语法,例如使用 RegExp
.这是脆弱的,因为微语法在未来可能会发生变化.
With #2 - we would need to parse the microsyntax, for example with RegExp
. This is fragile, since the micro-syntax may change in the future.
我们可以使用 Angular 自己的正则表达式(参见 src v1.4.3) 来解析这个语法:
We could use Angular's own regex expression (see src v1.4.3) to parse this syntax:
var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
(第 8 组匹配项目)
(the 8th group matches the items)
或者,我们可以使它成为更简单的正则表达式,甚至可能更稳定,例如:
Or, we could make it a simpler regex, perhaps even stabler, for example:
/^.*\s+in\s+(\S+)[\s\S]*$/
无论如何,指令看起来像这样:
At any rate, the directive would look like so:
app.directive('custom', function($parse) {
return {
scope: {},
link: function(scope, elem, attrs) {
var optionsExp = attrs.ngOptions;
var match = optionsExp.match(NG_OPTIONS_REGEXP);
var valuesExp = match[8];
var valuesFn = $parse(valuesExp);
var values = valuesFn(scope.$parent);
// or simpler:
// var values = $parse(match[8])(scope.$parent);
}
}
})
这篇关于如何从自定义指令中的 ng-options 获取我编译的数组?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!