作为关于这个 plunker 的后续行动:
如果在 Child 1 中选择项目时在 Chrome 中查看控制台,则会收到以下错误:
错误:不可赋值模型表达式:未定义(指令:childOne)
我完全感到困惑,因为指令元素是一个元素,而不是一个属性,并且在指令本身中被指定为这样。
TL;博士; - 问题是属性是snake-case,作用域定义将它们转换为camelCase。
那么你有:
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>'
};
})
问题是您绑定了 ngModel 但 child-one 元素没有为其提供值。如果我评论那部分,它似乎工作正常。
似乎当您在范围内有“=”绑定时,这意味着强制,当在 javascript 世界中定义时,属性也会从蛇形大小写转换为驼峰形大小写
PS:这是真的错误有点模糊
<child-one
label-name="Child 1" select-phrase="Please Select Clutch Type"
selectModel="ClutchType.Id" options="clutchTypes" >
</child-one>
selectModel="ClutchType.Id"
本来应该
select-model="ClutchType.Id"