Angularjs 具有隔离作用域指令的ng模型
我有一个单独的指令作为元素 既然返回的html被覆盖,我如何绑定它的Angularjs 具有隔离作用域指令的ng模型,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有一个单独的指令作为元素 既然返回的html被覆盖,我如何绑定它的ngmodel <div ng-repeat="x in list"> <form-element ng-model="value[x.name]"></form-element> </div> 我在添加ngmodel时遇到问题 JS: app.directive('formElement', functio
ngmodel
<div ng-repeat="x in list">
<form-element ng-model="value[x.name]"></form-element>
</div>
我在添加ngmodel时遇到问题
JS:
app.directive('formElement', function($compile) {
return {
restrict: 'E',
scope : {
type : '='
} ,
link : function(scope, element, attrs) {
scope.$watch(function () {
return scope.type ;
}, function() {
var templates = {};
templates['text'] = '<input type ="text" name="{{name}}">' ;
templates['radio'] = '<input ng-repeat="option in optionsList" name="{{name}}" type="radio">';
if (templates[inputType]) {
scope.optionsList = scope.type.data;
scope.name = scope.type.name;
element.html(templates[scope.type.inputType]);
} else {
element.html("");
}
$compile(element.contents())(scope);
}
);
}
}
});
提前感谢因为您希望在指令创建的字段中引入
ng模型
,您可以将该ngModel
注入隔离范围内
标记
<div ng-repeat="x in list">
<form-element ng-model="x.value" type="x.inputType"></form-element>
</div>
指令
app.directive('formElement', function($compile) {
return {
restrict: 'E',
scope: {
type: '=',
ngModel: '='
},
link: function(scope, element, attrs) {
var templates = {};
templates['text'] = '<input type ="text" name="{{name}}" ng-model="ngModel">';
templates['radio'] = '<input ng-repeat="option in optionsList" name="{{name}}" type="radio">';
if (templates[scope.type]) {
scope.optionsList = scope.type.data;
scope.name = scope.type.name;
element.append($compile(templates[scope.type])(scope));
} else {
element.html("");
}
//$compile(element.contents())(scope);
}
}
});
app.directive('formElement',函数($compile){
返回{
限制:'E',
范围:{
类型:“=”,
ngModel:“=”
},
链接:函数(范围、元素、属性){
var模板={};
模板['text']='';
模板['radio']='';
if(模板[scope.type]){
scope.options列表=scope.type.data;
scope.name=scope.type.name;
append($compile(模板[scope.type])(scope));
}否则{
html(“”);
}
//$compile(element.contents())(范围);
}
}
});
您要做的是调用隔离作用域的属性“ngModel”,但您没有使用ngModelController。这并不意味着您正在使用Angular提供的ngModel指令 您可以在指令中的任何其他名称中更改ngModel属性的名称,它应该可以正常工作 使用ngModel意味着在指令对象中添加require:'ngModel'”属性
return {
restrict: 'E',
require:'ngModel',
scope: {
type: '='
}
在link函数中,使用ngModelController访问$viewValue
function(scope, element, attrs, ngModelCtr)
{
var mymodel=ngModelCtr.$viewValue;
}
这里有更多信息。
你能用更多信息更新问题吗..你能提供相关代码吗..js代码。添加了更多信息@pankajparkar@sisimh仍然没有得到你的问题。你能添加更多的解释吗。
类型
从何而来&ng模型
值?好的,类型是一个对象,我告诉你类型是什么我要返回的html元素,所以这个对象将具有我需要的所有html DOM元素属性,包括inputType,比如radio,html DOM名称,值…所有…所以这个指令的返回值将是…等等@pankajparkar..我的问题是关于ngmodel的。我想添加ngmodel,以便在提交时可以获取绑定的值并在执行验证后将其发送到服务器非常感谢@pankajparker!非常有用的讨论:)@sisimh Hlad帮助您..谢谢:)