Błąd: niezbywalnej modelu wyrażenie: niezdefiniowane (dyrektywa: childOne)

Question

Jako kontynuację jeszcze odnośnie tego plunker:

plunker

Gdybym przeglądu konsolę w Chrome przy wyborze pozycja w Dziecko 1, pojawia się następujący błąd:

Error: niezbywalnej modelu wyrażenia: niezdefiniowany (dyrektywy: childOne)

Jestem całkowicie zaskoczony, ponieważ element dyrektywy jest elementem, a nie atrybutem i oznaczony jako taki w samej dyrektywie.

Answer 1

TL; DR; - Problem polega na tym, że atrybuty są snake-case, a definicja zakresu przekształca je w camelCase.

Cóż masz:

app.directive('childOne', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      labelName: "@", 
      selectPhrase: "@", 
      ngModel: "=", 
      options: "=", 
     }, 
     template: '<span><div class="local-label">{{labelName}}: </div><div style="width:15px;display:inline-block;"></div>' + 
        '<span style="display: inline-block;"><select ng-model="ngModel" ng-options="o.Id as o.Name for o in options | orderBy:\'Name\'" class="formRequire" required><option value="" selected="selected">{{selectPhrase}} ...</option></select>' + 
        '</span></div></span>' 
    }; 
}) 

Problemem jest to, że wiążą ngModel ale dziecko-jeden element nie stanowią dla niego wartość. Jeśli skomentuję tę część, wydaje się, że działa dobrze.

Wydaje się, że gdy masz „=” powiązań w zakresie oznacza to obowiązkowe, również atrybuty są przekształcane z węża przypadku do camelCase gdy zdefiniowane w javascript świat

PS: To prawdziwy błąd jest trochę niejasne

Answer 2

<child-one 
     label-name="Child 1" select-phrase="Please Select Clutch Type" 
     selectModel="ClutchType.Id" options="clutchTypes" > 
</child-one> 


selectModel="ClutchType.Id" 

powinien być

select-model="ClutchType.Id"