我有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>
更多推荐
发布评论