5

テンプレートに別のディレクティブがあるディレクティブがあります。

<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>は基本的に、カスタム スタイルを有効にするための単なるラッパーです。

式を渡すときに特別な考慮が必要ですか? 私は何を間違っていますか？

4

2 に答える 2

0

思い浮かんだことは2つ

  • ng-options は文字列を想定しており、これが解析されて関連するビットが得られます。入れng-options="{{ngOptions}}"てみて、問題が解決するかどうかを確認できます。ただし、おそらく次のポイント 2 にぶつかるでしょう。
  • 分離されたスコープを作成したため、式が機能していても、スコープには式から関連するプロパティがありません。

{{}} トリックが機能しない場合は、元の ng-options 文字列 (リンク関数内) にアクセスできるようになったら、手動でテンプレートを $compile する必要があるようです。

于 2013-05-15T16:51:03.380 に答える
0

AngularJS ソースで ngOptions がどのように実装されているかを見てみましょう。ここで式の正規表現パターンを見つけることができます:

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-15T13:21:02.950 に答える