Javascript 表单[范围未更新]中自定义字段的指令

我正在尝试为表单中的自定义字段创建一个指令。我能够创建指令，但无法更新范围

有关此问题的更多想法，请参见演示

我面临的问题是，当我提交表单时，我得到的自定义字段值为空或未定义。因为双向绑定不起作用

您将看到，当我们从父级更新范围时，它将更新指令范围，但当您在自定义字段中更新它时，它将不会更新正在使用父级范围的输入字段，并且在这之后，双向绑定将不起作用

这是我的档案

users.html

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

<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>

这是我在提交表单时得到的用户模型

演示

解决了这个问题

它正在创建子范围，只是将自定义字段指令.htmlngModle更改为$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>

{{mydata.field_name}
{{mydata.field_name}是必需的
{{mydata.field_name}

关于你的答案@jack

子作用域由

ngIf

创建

您可以使用

ngShow

ngHide

或

ngWhen

来解决作用域问题

通常，您应该尽量避免调用

$parent

每当您遇到

$parent

修复问题的情况时，很可能是您的范围有问题或设计错误

您可以在中查看关于

ngIf

范围的信息

以下是相关部分：

---

是的，你是对的，我也试过了，它也能工作，但我不知道为什么它不能工作。所以我用了$parent。谢谢你的解释

$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;
        });
    }

<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>