我在Stackoverflow上搜索过这个问题,但都与此不同。虽然问题可能相同,但实施却不同。
该指令接受一个名为config的JSON数组。其中包含输入或下拉列表的属性。我还收到必须在ngModel中绑定的变量。一切都很好,如ng-maxlength ng-minlength,但ng-model
没有。我无法获取值或简单地说没有双向绑定。另外,为了获取单个对象中的所有值,我在自定义指令的name
属性中附加了一个名为pgCard的字符串。使它看起来像pgCard.*
直接用作json对象。但一切都是徒劳的。我甚至尝试删除pgCard
但没有用。
以下是我的自定义指令元素标记
<program-gateway config="configArrayCard" name="pgCard"></program-gateway>
这是我的自定义指令。
app.directive('programGateway',['$compile',
function($compile){
return {
restrict : 'E',
replace :true,
template:"<div class='row'></div>",
scope:{
config:"=",
name:"@"
},
link: function(scope,e,attr){
var modelPrefix=scope.name+"." || "";
var field="",model="";
var max="",min="",maxlen="",req="",options="";
var leftHTML="",rightHTML="",innerHTML="";
scope.config=sortByKey(scope.config,"propertyKey");
angular.forEach(scope.config,function(value,key){
model=modelPrefix+value.propertyKey;
var midLen=(Math.floor(scope.config.length/2))+(Math.floor(scope.config.length%2));
if(!value.propertyInfo.selection){
if(value.propertyInfo.hasOwnProperty("max")){
max="data-ng-maxlength='"+value.propertyInfo.max+"'";
maxlen="maxlength='"+value.propertyInfo.max+"'"
} if(value.propertyInfo.hasOwnProperty("min")){
min="data-ng-minlength='"+value.propertyInfo.min+"'";
}
req=(value.propertyInfo.optional)?"":"required";
field="<input "+req+" class='form-control' type='text' id='"+model+"' data-ng-model='"+model+"' "+max+" "+min+" "+maxlen+">";
}else{
var optArr="[\""+(value.propertyInfo.selectionOptions).replace(/,/g, '","')+"\"]";
field="<select data-ng-options='opt for opt in "+optArr+"' "+req+" data-ng-model='"+model+"' class='form-control' id='"+model+"'>"+
"<option value=''>Select </option>"+
"</select>";
}
if(key<midLen){
leftHTML+="<div class='form-group'>"+
"<label for='"+value.propertyInfo.propertyLabel+"' class='col-sm-5 control-label'><span data-ng-hide='"+value.propertyInfo.optional+"' class='red'>*</span>"+value.propertyInfo.propertyLabel+":</label>"+
"<div class='col-sm-7'>"
+field+
"</div>"+
"</div>";
}else{
rightHTML+="<div class='form-group'>"+
"<label for='"+value.propertyInfo.propertyLabel+"' class='col-sm-5 control-label'><span data-ng-hide='"+value.propertyInfo.optional+"' class='red'>*</span>"+value.propertyInfo.propertyLabel+":</label>"+
"<div class='col-sm-7'>"
+field+
"</div>"+
"</div>";
}//if closed
});// for closed
innerHTML="<div class='col-sm-6'>"+leftHTML+"</div>"+
"<div class='col-sm-6'>"+rightHTML+"</div>";
e.html(innerHTML);
scope.$watch(function() {
return scope.pgCard = scope.pgCard;
});
$compile(e.contents())(scope);
}
}
}]);
这是我收到的json的快照
"config":[{"propertyKey":"reportGroup","editable":true,"propertyInfo"
:{"max":3,"optional":true,"propertyLabel":"Report Group","selection":false}},{"propertyKey":"sendStatementToCompany"
,"propertyValue":"Yes","editable":true,"propertyInfo":{"optional":false,"propertyLabel":"Send Statement
to Company","selection":true,"selectionOptions":"Yes,No","defaultValue":"Yes"}}]
请帮我做错事。