angularjs - 将表达式传递给指令

Question

我有一个指令，它的模板中有另一个指令。

<nv-select ng-model="from" ng-options="item.name as item for item in from"></nv-select>

在这里，我尝试将表达式传递给 ng-options的子指令。不幸的是，这总是给我以下错误

Error: Syntax Error: Token 'as' is an unexpected token at column ...

如果我把表达式放在 ng-options 中子指令的 select ，它工作得很好。我的 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> 的包装器启用自定义样式。

传递表达式时是否需要特别考虑？我究竟做错了什么？

Answer 1

让我们看看 ngOptions 如何在 AngularJS 源代码中实现。在这里我们可以找到表达式的正则表达式模式:

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

所以你可以使用它或编写新的。