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的{{1}}中，它就可以了。我的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的包装器，可以启用自定义样式。

传递表达式时是否需要特别注意？我做错了什么？

Answer 1

让我们看看如何在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]);

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

Answer 2

有两件事让人想起

ng-options需要一个字符串，然后解析该字符串以提供相关位。您可以尝试放置ng-options="{{ngOptions}}"并查看是否可以解决问题。但是你可能会反对第二点：
您已经创建了一个独立的范围，因此即使您使表达式工作，范围也不会包含表达式中的相关属性。

如果{{}}技巧不起作用，那么一旦你有权访问原始的ng-options字符串（即在链接函数中），你就必须手动编译模板。

将表达式传递给指令

2 个答案: