使用 ng-model 的 AngularJS 自定义表单组件/指令 [英] AngularJS custom form component / directive using ng-model
问题描述
当使用常规输入时，比如
When using regular input, such as
<form name="myForm">
<input type="text" ng-model="foobar">
</form>
在输入框中输入后 myForm.$dirty 为真.
after typing in the input box myForm.$dirty is true.
我想创建一个简单的指令，例如
I'd like to create a simple directive such as
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
fooBar: '='
},
template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
};
});
示例用法为
<form name="myForm">
<my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>
并且在用户单击两个按钮中的任何一个后，myForm$dirty 设置为 true.
and after user clicks on any of the two buttons, myForm$dirty is set to true.
这是如何实现的?
推荐答案
实现自定义表单控件(使用 ngModel)
使用 ngModel 控制器和<的对象形式DDO 中的 href="https://docs.angularjs.org/api/ng/service/$compile#-require-" rel="nofollow noreferrer">require 属性:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
require: { ngModelCtrl: 'ngModel' },
scope: {
ngModel: '<'
},
bindToController: true,
controllerAs: '$ctrl',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});
用法:
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
通过实例化和使用 ng-model 控制器，指令将根据需要自动设置表单控件.
By instantiating and using the ng-model controller, the directive will automatically set the form controls as necessary.
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
require: { ngModelCtrl: 'ngModel' },
scope: {
ngModel: '<'
},
bindToController: true,
controllerAs: '$ctrl',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myModule">
<h2>ngModel DEMO</h2>
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
<br>myForm.$dirty = {{myForm.$dirty}}
<br>myForm.$pristine = {{myForm.$pristine}}
<br><button ng-click="myForm.$setDirty()">Set dirty</button>
<br><button ng-click="myForm.$setPristine()">Set pristine</button>
</body>我建议使用 ngModel 作为输入来隔离范围.输出应使用 $setViewValue 方法完成.
I recommend isolate scope with ngModel as an input. Output should be done with the $setViewValue method.
有关详细信息，请参阅
AngularJS 开发人员指南 - 基于组件的应用程序架构
这篇关于使用 ng-model 的 AngularJS 自定义表单组件/指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
