Przeprowadź wyrażenie do dyrektywy

Question

Mam dyrektywę, która ma inną dyrektywę w swoim szablonie.

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

Tutaj staram się przechodzić wzdłuż wypowiedzi do ng-options dyrektywy dziecięcej. Niestety, które zawsze daje mi następujący błąd

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

Jeśli mogę umieścić wyraz w ng-options dyrektywy dziecka select, to działa dobrze. Moja dyrektywa nv-select wygląda następująco:

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 jest w zasadzie tylko owinięcie wokół <select> włączyć niestandardowych stylizacji.

Czy muszę podać specjalne uwagi podczas przekazywania wyrażenia? Co ja robię źle?

Answer 1

Zobaczmy, jak zaimplementowano ngOptions w źródłach AngularJS. Tutaj możemy znaleźć regexp wzorzec dla wyrażeń:

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+(.*)$/ 

a następnie

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

więc można go używać lub napisać nowe.

Answer 2

Są dwie rzeczy, które przychodzi na myśl

• NG-opcje oczekuje ciąg, który jest następnie analizowany dać odpowiednie bity. Możesz spróbować umieścić ng-options="{{ngOptions}}" i sprawdzić, czy to pozbędzie się problemu. Prawdopodobnie jednak uderzysz w punkt drugi, który jest:
• Utworzono izolowany zakres, więc nawet jeśli masz działające wyrażenie, zakres nie będzie zawierał odpowiednich właściwości od wyrażenia na nim.

Jeśli sztuczka {{}} nie działa, to wygląda na to, że będziesz musiał ręcznie skompilować szablon, gdy uzyskasz dostęp do oryginalnego ciągu opcji ng (np. W funkcji łączenia).