Angular js根据条件禁用指令(Angular js to disable directives based on condition)

Angular js根据条件禁用指令(Angular js to disable directives based on condition)

我有一个表单页面，用于添加和编辑表单。 所以在将数据添加到表单时，我需要检查输入数据是否重复，因此我创建了一个指令，它将检查数据库中是否存在天气数据。

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid required /></div>

在添加新数据时，它的工作正常。 但在编辑时也使用相同的形式，因此unique-divid指令正在运行。 我不希望在编辑页面中发生这种情况

.directive('uniqueDivid', function($http) { var toId; return { restrict: 'A', require: 'ngModel', link: function(scope, elem, attr, ctrl) { scope.$watch(attr.ngModel, function(value) { if(toId) clearTimeout(toId); toId = setTimeout(function(){ console.log(value); $http({ method : 'POST', url : 'http://testurl', data : $.param({'DivisionID' : value}), headers : { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if(data.status == 'success'){ ctrl.$setValidity('uniqueDivid', true); }else if(data.status == 'fail'){ ctrl.$setValidity('uniqueDivid', false); } if (!data.success) { } else { } }); }, 200); }) } } });

请建议解决方案是禁用指令或停止范围。编辑时的$ watch功能。

I am having a form page which is used for both add and edit form . So at the time of adding data into form , i need to check input data is duplicated or not, so i created a directive which will check with the data base weather data is existed or not.

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid required /></div>

at the time of adding new data its works fine . but at the time of edit also using the same form so the unique-divid directive is running. I don't want this to happen in edit page

.directive('uniqueDivid', function($http) { var toId; return { restrict: 'A', require: 'ngModel', link: function(scope, elem, attr, ctrl) { scope.$watch(attr.ngModel, function(value) { if(toId) clearTimeout(toId); toId = setTimeout(function(){ console.log(value); $http({ method : 'POST', url : 'http://testurl', data : $.param({'DivisionID' : value}), headers : { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if(data.status == 'success'){ ctrl.$setValidity('uniqueDivid', true); }else if(data.status == 'fail'){ ctrl.$setValidity('uniqueDivid', false); } if (!data.success) { } else { } }); }, 200); }) } } });

Please suggest a solution either disable the directive or stop the scope.$watch function at the time of edit .

最满意答案

您是否可以在输入字段中添加其他属性，指示它正在服务的表单操作类型（创建/编辑）？

例如：

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid form-action="edit" required />

如果操作类型与您要忽略的操作类型匹配，则只需从链接功能返回。

link: function(scope, elem, attr, ctrl) { if (attr.formAction === "edit") return; .. }

如果您不想修改模板，控制器或范围中的哪些指示可用于区分新的和现有的divisionData ？ 您可以使用该属性作为标志从unique-divid指令返回：

link: function(scope, elem, attr, ctrl) { if (!scope.divisionData.isNew) return; .. }

Can you add additional attribute to the input field indicating type of form action (create/edit) it is serving?

For example:

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid form-action="edit" required />

If action type matches the one you want to ignore, just return from linking function.

link: function(scope, elem, attr, ctrl) { if (attr.formAction === "edit") return; .. }

In case you do not want to modify template, what is the indication in controller or scope that could be used to distinguish between new and existing divisionData? You could use that property as a flag to return from the unique-divid directive:

link: function(scope, elem, attr, ctrl) { if (!scope.divisionData.isNew) return; .. }Angular js根据条件禁用指令(Angular js to disable directives based on condition)

我有一个表单页面，用于添加和编辑表单。 所以在将数据添加到表单时，我需要检查输入数据是否重复，因此我创建了一个指令，它将检查数据库中是否存在天气数据。

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid required /></div>

在添加新数据时，它的工作正常。 但在编辑时也使用相同的形式，因此unique-divid指令正在运行。 我不希望在编辑页面中发生这种情况

.directive('uniqueDivid', function($http) { var toId; return { restrict: 'A', require: 'ngModel', link: function(scope, elem, attr, ctrl) { scope.$watch(attr.ngModel, function(value) { if(toId) clearTimeout(toId); toId = setTimeout(function(){ console.log(value); $http({ method : 'POST', url : 'http://testurl', data : $.param({'DivisionID' : value}), headers : { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if(data.status == 'success'){ ctrl.$setValidity('uniqueDivid', true); }else if(data.status == 'fail'){ ctrl.$setValidity('uniqueDivid', false); } if (!data.success) { } else { } }); }, 200); }) } } });

请建议解决方案是禁用指令或停止范围。编辑时的$ watch功能。

I am having a form page which is used for both add and edit form . So at the time of adding data into form , i need to check input data is duplicated or not, so i created a directive which will check with the data base weather data is existed or not.

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid required /></div>

at the time of adding new data its works fine . but at the time of edit also using the same form so the unique-divid directive is running. I don't want this to happen in edit page

.directive('uniqueDivid', function($http) { var toId; return { restrict: 'A', require: 'ngModel', link: function(scope, elem, attr, ctrl) { scope.$watch(attr.ngModel, function(value) { if(toId) clearTimeout(toId); toId = setTimeout(function(){ console.log(value); $http({ method : 'POST', url : 'http://testurl', data : $.param({'DivisionID' : value}), headers : { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if(data.status == 'success'){ ctrl.$setValidity('uniqueDivid', true); }else if(data.status == 'fail'){ ctrl.$setValidity('uniqueDivid', false); } if (!data.success) { } else { } }); }, 200); }) } } });

Please suggest a solution either disable the directive or stop the scope.$watch function at the time of edit .

最满意答案

您是否可以在输入字段中添加其他属性，指示它正在服务的表单操作类型（创建/编辑）？

例如：

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid form-action="edit" required />

如果操作类型与您要忽略的操作类型匹配，则只需从链接功能返回。

link: function(scope, elem, attr, ctrl) { if (attr.formAction === "edit") return; .. }

如果您不想修改模板，控制器或范围中的哪些指示可用于区分新的和现有的divisionData ？ 您可以使用该属性作为标志从unique-divid指令返回：

link: function(scope, elem, attr, ctrl) { if (!scope.divisionData.isNew) return; .. }

Can you add additional attribute to the input field indicating type of form action (create/edit) it is serving?

For example:

<input name="divId" type="text" class="form-control fL w250" ng-model="divisionData.DivisionID" ng-disabled="Disabled()" unique-divid form-action="edit" required />

If action type matches the one you want to ignore, just return from linking function.

link: function(scope, elem, attr, ctrl) { if (attr.formAction === "edit") return; .. }

In case you do not want to modify template, what is the indication in controller or scope that could be used to distinguish between new and existing divisionData? You could use that property as a flag to return from the unique-divid directive:

link: function(scope, elem, attr, ctrl) { if (!scope.divisionData.isNew) return; .. }