将表达式传递给指令

我有一个指令，它的模板中有另一条指令。将表达式传递给指令

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

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

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

来源

2013-05-15 Erik Aigner

让我们来看看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]);

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

来源

2013-05-15 13:21:02

不明白你的答案。 –

有两件事情，映入脑海

NG选项需要一个字符串，然后解析给相关位。你可以尝试把ng-options="{{ngOptions}}"，看看是否摆脱了这个问题。然而，你可能会碰到第二点：
你已经创建了一个独立的范围，所以即使你有表达式的工作范围将不会从表达式的相关属性。

如果{{}}技巧不起作用，那么看起来您必须在访问原始ng-options字符串（即链接函数）后手动编译模板。

来源

2013-05-15 16:51:03

将表达式传递给指令

回答

相关问题