angularjs – 将表达式传递给指令

发布时间：2020-12-17 18:03:17 所属栏目：安全来源：网络整理

导读：我有一个指令,它的模板中有另一个指令. nv-select ng-model="from" ng-options="item.name as item for item in from"/nv-select 在这里,我尝试将表达式传递给child指令的ng-options.不幸的是,总是给我以下错误 Error: Syntax Error: Token 'as' is an unexp

我有一个指令,它的模板中有另一个指令.

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

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

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

如果我将表达式放在子指令的选择的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>的包装器.启用自定义样式.

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

解决方法

我们来看看如何在AngularJS源中实现ngOptions.在这里我们可以找到表达式的regexp模式：

var NG_OPTIONS_REGEXP = /^s*(.*?)(?:s+ass+(.*?))?(?:s+groups+bys+(.*))?s+fors+(?:([$w][$wd]*)|(?:(s*([$w][$wd]*)s*,s*([$w][$wd]*)s*)))s+ins+(.*)$/

然后

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!