Error: Non-assignable model expression: undefined (directive: childOne)

Question

As a follow-up still regarding this plunker:

plunker

If I review the console in Chrome when selecting an item in Child 1, I get the following error:

Error: Non-assignable model expression: undefined (directive: childOne)

I am completely baffled as the directive element is an element, not an attribute and designated as such in the directive itself.

Answer 1

TL;DR; - The problem is that attributes are snake-case and the scope definition transforms them to camelCase.

Well you have:

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>'
    };
})

The problem is that you bind ngModel but the child-one element doesn't provide a value for it. If I comment that part it seems to work ok.

It seems that when you have "=" bindings in the scope it means mandatory, also attributes are transformed from snake-case to camelCase when defined in javascript world

PS: It's true the error is a little vague

Answer 2

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


selectModel="ClutchType.Id" 

should have been

select-model="ClutchType.Id"