表单中自定义字段的指令 [范围未更新]
Directive for custom fields in form [scope is not updating]
我正在尝试为表单中的自定义字段创建一个指令。我可以创建指令但无法更新范围。
有关问题的更多想法,请参阅 Plunker 演示
问题 我面临的问题是,当我提交表单时,我得到的自定义字段 ng-model 的值为 null 或 undefined。因为 双向绑定 不工作
你会看到,当我们从父级更新范围时,它会更新指令范围,但是当你在自定义字段中更新它时,它不会更新使用父级范围的输入字段,之后双向绑定将不起作用
这是我的文件
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>
从数据库获取自定义字段值的函数UsersController.js
$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;
});
}
这是我在提交表单时得到的用户模型
演示
解决了。
它正在创建子作用域,只是将 custom_field_directive.html ngModle 更改为 $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>
关于你的回答@jack。
子范围由 ngIf
创建。
您可以使用 ngShow
ngHide
或 ngWhen
来解决范围问题。
一般来说,您应该尽可能避免调用 $parent
。
每当您遇到 $parent
解决问题的情况时,很可能是您的示波器有问题或设计错误
您可以在 docs
中看到大约 ngIf
个范围
相关部分如下:
我正在尝试为表单中的自定义字段创建一个指令。我可以创建指令但无法更新范围。
有关问题的更多想法,请参阅 Plunker 演示
问题 我面临的问题是,当我提交表单时,我得到的自定义字段 ng-model 的值为 null 或 undefined。因为 双向绑定 不工作
你会看到,当我们从父级更新范围时,它会更新指令范围,但是当你在自定义字段中更新它时,它不会更新使用父级范围的输入字段,之后双向绑定将不起作用
这是我的文件
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>
从数据库获取自定义字段值的函数UsersController.js
$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;
});
}
这是我在提交表单时得到的用户模型
演示
解决了。
它正在创建子作用域,只是将 custom_field_directive.html ngModle 更改为 $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>
关于你的回答@jack。
子范围由 ngIf
创建。
您可以使用 ngShow
ngHide
或 ngWhen
来解决范围问题。
一般来说,您应该尽可能避免调用 $parent
。
每当您遇到 $parent
解决问题的情况时,很可能是您的示波器有问题或设计错误
您可以在 docs
中看到大约ngIf
个范围
相关部分如下: