angularjs自定义表单和字段指令：在FormController中找不到ngModelController(angularjs custom form and field directive: ngModelController is not found in FormController)
我有2个指令，一个是my-form，一个是my-field。 我需要使用动态创建这两个指令的html内容的模式。 一切都很好，除了我无法获得输入字段的ngModelController。 所以我无法获得这些字段的$ dirty，$ valid属性。 例如，在提交时，我想获取名为“field1”的输入的ngModelController，但我无法得到它。 form.field1未定义。 在FormController“form1”中，没有字段，任何人都可以帮忙吗？ 非常感谢
小提琴中的代码是： https ： //jsfiddle.net/0td5hLur/3/
主要代码也列在下面：
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.config = {
name: 'form1',
fields: [
{type: 'text', name: 'field1', model: 'obj.field1'},
{type: 'text', name: 'field2', model: 'obj.field2'}
]
};
}])
.directive('myForm', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
compile: function(element, attrs, transclude) {
return {
pre: function (scope, iElement, iAttrs, controller) {
console.log('-------myForm');
var html = '<form name="{{config.name}}">' +
' <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
' <button ng-click="submit()">submit</button>' +
'</form>';
iElement.append($compile(html)(scope));
scope.obj = {
field1: '1',
field2: '2'
};
scope.submit = function () {
var form = scope[scope.config.name];
console.log(form);
alert(form.field1);
alert(form.field1.$dirty); // error here
}
}
};
}
}
}])
.directive('myField', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
compile: function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) {
var config = scope.config;
var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
iElement.after($compile(html)(scope.$parent));
iElement.remove();
}
}
}
}
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<my-form config="config"></my-form>
</div>
I have 2 directives, one is my-form, one is my-field. I need to use the mode of dynamically creating the html content for both of these two directives. Everything works well except I can not get the ngModelController of the input fields. So I can not get the $dirty, $valid properties of these fields. For example, when submitting, I want to get the ngModelController of the input with name "field1", but I can not get it. form.field1 is undefined. In the FormController "form1", there is no field, any one can help on this? Many thanks
the code in fiddle is: https://jsfiddle.net/0td5hLur/3/
main codes are also listed below:
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.config = {
name: 'form1',
fields: [
{type: 'text', name: 'field1', model: 'obj.field1'},
{type: 'text', name: 'field2', model: 'obj.field2'}
]
};
}])
.directive('myForm', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
compile: function(element, attrs, transclude) {
return {
pre: function (scope, iElement, iAttrs, controller) {
console.log('-------myForm');
var html = '<form name="{{config.name}}">' +
' <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
' <button ng-click="submit()">submit</button>' +
'</form>';
iElement.append($compile(html)(scope));
scope.obj = {
field1: '1',
field2: '2'
};
scope.submit = function () {
var form = scope[scope.config.name];
console.log(form);
alert(form.field1);
alert(form.field1.$dirty); // error here
}
}
};
}
}
}])
.directive('myField', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
compile: function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) {
var config = scope.config;
var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
iElement.after($compile(html)(scope.$parent));
iElement.remove();
}
}
}
}
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<my-form config="config"></my-form>
</div>
最满意答案
我自己试了一下，只修改了几行，但这真的不是一件容易的事。 最终工作代码如下： 我错过了以下几行： iElement.after（HTML）; var element = iElement.next（）; iElement.remove（）; $编译（元件）（范围$父）;
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.config = {
name: 'form1',
fields: [
{type: 'text', name: 'field1', model: 'obj.field1'},
{type: 'text', name: 'field2', model: 'obj.field2'}
]
};
}])
.directive('myForm', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
link: function (scope, iElement, iAttrs, controller) {
console.log('-------myForm');
var html = '<form name="{{config.name}}">' +
' <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
' <button ng-click="submit()">submit</button>' +
'</form>';
iElement.append($compile(html)(scope));
scope.obj = {
field1: '1',
field2: '2'
};
scope.submit = function () {
var form = scope[scope.config.name];
console.log(form);
alert(form.field1);
alert(form.field1.$dirty); // error here
}
}
}
}])
.directive('myField', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
link: function(scope, iElement, iAttrs, controller) {
var config = scope.config;
var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
iElement.after(html);
var element = iElement.next();
iElement.remove();
$compile(element)(scope.$parent);
}
}
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<my-form config="config"></my-form>
</div>
I tried it out myself, only modified several lines but it was really not a easy job. The final working codes are as below: What I missed are below lines: iElement.after(html); var element = iElement.next(); iElement.remove(); $compile(element)(scope.$parent);
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.config = {
name: 'form1',
fields: [
{type: 'text', name: 'field1', model: 'obj.field1'},
{type: 'text', name: 'field2', model: 'obj.field2'}
]
};
}])
.directive('myForm', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
link: function (scope, iElement, iAttrs, controller) {
console.log('-------myForm');
var html = '<form name="{{config.name}}">' +
' <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
' <button ng-click="submit()">submit</button>' +
'</form>';
iElement.append($compile(html)(scope));
scope.obj = {
field1: '1',
field2: '2'
};
scope.submit = function () {
var form = scope[scope.config.name];
console.log(form);
alert(form.field1);
alert(form.field1.$dirty); // error here
}
}
}
}])
.directive('myField', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
config: '='
},
link: function(scope, iElement, iAttrs, controller) {
var config = scope.config;
var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
iElement.after(html);
var element = iElement.next();
iElement.remove();
$compile(element)(scope.$parent);
}
}
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<my-form config="config"></my-form>
</div>
更多推荐
发布评论