javascript - 如何从自定义指令中的 ng-options 获取编译后的数组？

Question

我有一个自定义指令，我正在装饰一个 <select ng-options="">这样……

<select custom ng-model="selected" ng-options="o for o in values">

与 custom作为我的指令和values作为一个简单的数组。这是我的实现...

<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 内我可以这样看

console.log(attrs.ngOptions);

在这种情况下，它会记录文字 "o for o in values" .我能以某种方式在我的 link 中解析或编译它吗？得到数组？我知道如果我做类似 scope.$parent.values 的事情我可以捕获它, 但这似乎没有必要，我需要知道 "values" 的名称.我可能可以通过一些老掉牙的字符串操作来定位它，但我希望有一种更直观的方法。

hacky 例如

var array = attrs.ngOptions.split(' ').pop(); // "values"

console.log(scope.$parent[array]);

旁注 - 此示例限制为 AngularJS 1.2.x

JSFiddle Link - 例子

Answer 1

从 Angular v1.4 开始，select 都不是也不ngOptions指令提供了一个 API 来获取导致 <option> 的项目数组s，所以我们只剩下 2 个选择 - 1) 通过 values显式排列为 custom指令作为属性值，或 2) 从 ng-options 的微语法派生它.

#1 - 方法很简单。

使用#2 - 我们需要解析微语法，例如 RegExp .这是脆弱的，因为微语法将来可能会改变。

我们可以使用 Angular 自己的正则表达式(参见 src v1.4.3)来解析这个语法:

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组匹配项)

或者，我们可以使它成为一个更简单的正则表达式，甚至可能更稳定，例如:

/^.*\s+in\s+(\S+)[\s\S]*$/

无论如何，该指令看起来像这样:

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);
    }
  }
})