Directive for custom fields in the form [area not updated]

Question

I am trying to create a directive for custom fields in a form. I can create a directive, but I can not update the scope.

See Plunker to learn more about the issue.

The Problem I encountered when I submit a form that I get the value of a custom field. ng-model is null or undefined. because two-way snapping does not work

you will see when we update the scope from the parent, it will update the scope of the directive, but when you update it in a custom field, it will not update the input field that uses the parent scope, and after that the two-way binding will not work.

Here are my files

users.html

<custom-field ng-repeat="(key,field) in custom_fields" form="userForm" ng-model="user.custom_field[field.id]" fielddata="field"></custom-field> 

app.js

 app.directive('customField', function () { var directive = {}; directive.restrict = 'E'; directive.templateUrl = 'app/modules/custom_fields/views/custom_field_directive.html'; directive.scope = { ngModel: "=", mydata: "<fielddata", form: "<" } return directive; }); 

custom_field_directive.html

 <div layout="row" layout-xs="column"> <div flex > <!-- Custom input field html [Required Field] --> <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==1"> <label>{{mydata.field_name}}</label> <input name="{{mydata.slug}}" ng-model="ngModel" ng-required="!ngModel"> <div ng-messages="form[''+mydata.slug+''].$error" ng-show="form[''+mydata.slug+''].$touched" role="alert"> <div ng-message="required"> <span>{{mydata.field_name}} is required</span> </div> </div> </md-input-container> <!-- Custom input field html --> <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==0"> <label>{{mydata.field_name}}</label> <input name="phone" ng-model="ngModel"> </md-input-container> </div> </div> 

The function of obtaining custom field values ​​from the UsersController.js database

 $scope.getCustomFields = function (id = "") { $rootScope.loader = true; $http.post(site_settings.api_url + 'get_custom_fields_admin_user', {id: id}) .then(function (response) { $scope.custom_fields = response.data; angular.forEach($scope.custom_fields, function (value, key) { if (value.field_values) { $scope.user.custom_field[value.id] = value.field_values.value; console.log("in"); } else { $scope.user.custom_field[value.id] = null; } }); $rootScope.loader = false; }).catch(function (error) { $rootScope.message = 'Something Went Wrong.'; $rootScope.$emit("notification"); $rootScope.loader = false; }); } 

Here is my user model that I get when I submit the form

Demo

Plunker

Answer 1

Regarding your answer @jack.

The volume of the child is created by ngIf .

Instead, you can use ngShow ngHide or ngWhen and solve the problem of defining the scope.

Generally, you should avoid calling $parent as much as you can.

Whenever you encounter a situation where $parent fixes the problem, it is most likely a problem with your area or the wrong design

You can see the ngIf area in docs

here is the important part:

Answer 2

I decided.

He created a child scope, just changed custom_field_directive.html ngModle to $ parent.ngModel

 <div layout="row" layout-xs="column"> <div flex > <!-- Custom input field html [Required Field] --> <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==1"> <label>{{mydata.field_name}}</label> <input name="{{mydata.slug}}" ng-model="$parent.ngModel" ng-required="!ngModel"> <div ng-messages="form[''+mydata.slug+''].$error" ng-show="form[''+mydata.slug+''].$touched" role="alert"> <div ng-message="required"> <span>{{mydata.field_name}} is required</span> </div> </div> </md-input-container> <!-- Custom input field html --> <md-input-container class="md-block" ng-if="mydata.type == 'input' && mydata.is_required==0"> <label>{{mydata.field_name}}</label> <input name="phone" ng-model="$parent.ngModel"> </md-input-container> </div> </div>