將表達式傳遞給指令

我有一個指令，它的模板中有另一條指令。將表達式傳遞給指令

<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

將表達式傳遞給指令

回答

相關問題