我怎样才能让我的编译阵列从一个自定义指令NG-选择？ [英] How can I get my compiled array from ng-options in a custom directive?

问题描述

我有我装饰＆LT自定义指令;选择NG选项=＆GT; 因该...

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">

与自定义我的指令和值是一个简单的数组。下面是我的实现...

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

在我的链接我可以看到它是这样

console.log(attrs.ngOptions);

，在这种情况下，注销字面o表示o在值。我能以某种方式解析或我的链接中编译该得到的阵列？我知道我可以抓住它，如果我做类似范围。$ parent.values​​ ，但这似乎没有必要，我需要知道的名称价值观。我大概可以得到它通过一些哈克感觉字符串操作的目标，但我希望有一个更直观的方式。

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.

哈克例如

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链接 - 例如

推荐答案

由于角V1.4中，无论是选择也不 ngOptions 指令提供了一个API来获取项目的数组导致＆LT;选项＆GT; S，所以我们只剩下两个选择 - 1）通过值阵列明确地自定义指令作为一个属性值，或2）从<$ C的微语法得到它$ C> NG-选项。

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 - 我们需要用正则表达式来解析microsyntax，例如。这是脆弱的，因为微语法可能在未来改变。

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.

我们可以用角的正则表达式的前pression（见的 SRC 1.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-选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！