Angular:如何绑定到required/ngRequired
Angular: how to bind to required/ngRequired
我有这个指令,它可以是必需的,也可以不是必需的。它可以用两种方式(据我所知)
<my-foo required></my-foo>
或
<my-foo ng-required="data.value > 10"></my-foo>
所以,因为require
和ngRequire
基本上是一样的,你会认为指令可以做这个
HTML:
<my-foo ng-require="data.isRequired"></my-foo>
JS:
...
.directive('myFoo', function () {
return {
restrict: 'E',
scope: {
required: '='
}
...
演示
不,这不管用,scope.require
就是undefined
。实际上,您必须将范围定义更改为
scope: {
required: '=ngRequired'
}
所以问题是,处理这两种情况的首选方法是什么,以便将值存储在scope.required
中?我应该同时定义这两个还是使用链接函数中的属性?
基本上有两种方法可以选择:
1.支持ng-model
的自定义表单元素
如果你仔细查看ng-required
指令源代码,你会发现它只处理ng-model
控制器:
restrict: 'A',
require: '?ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
attr.required = true; // force truthy in case we are on non input element
ctrl.$validators.required = function(modelValue, viewValue) {
return !attr.required || !ctrl.$isEmpty(viewValue);
};
attr.$observe('required', function() {
ctrl.$validate();
});
}
因此,如果您的自定义指令支持ng-model
,则您已经支持ng-required
,即:
angular.module('test', [])
.directive('myInput', function(){
return {
restrict: 'E',
require: 'ngModel',
scope: true,
template: '<div><button ng-click="changeValue()">Change Value from: {{currentValue}}</button></div>',
link: function (scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.push(function(val){
if(!val){
return null;
}
return parseFloat(val, 10) * 100;
});
ngModelCtrl.$render = function() {
scope.currentValue = ngModelCtrl.$viewValue || 'No value';
};
scope.changeValue = function read(){
var newValue = Math.random();
if(newValue > 0.5){
ngModelCtrl.$setViewValue(newValue + "");
} else {
ngModelCtrl.$setViewValue(null);
}
ngModelCtrl.$render();
};
}
};
});
2.包装现有指令并传递ng-required
:
angular.module('test', [])
.directive('myFormElement', function() {
return {
restrict: 'E',
scope: {
model: '=',
required: '='
},
template: '<div>Enter number: <input type="number" ng-model="data.number" ng-required="required"></div>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-init="data={value:'Initial', required: false}">
<form>
Is required: <input type="checkbox" ng-model="data.required">
<my-form-element required="data.required" model="data"></my-form-element>
</form>
</div>
相关文章:
- sails.js beforeCreate方法只接收required设置为true的模型属性
- Javascript - 根据表单选择切换 html5 required=“” 属性
- JQuery prop('required', false, (!$(this).is(':checked')) 不起作
- KnockoutJS Required/Disabled属性未删除
- 通过点击表单外的按钮,使用required和angularjs验证输入字段
- 将 validate=“required:true” 添加到您的 html 中
- 使用 Jquery 将属性 Required 添加到 Razor 应用程序中的输入中
- jQuery multi vals required
- 将 r.js 与 Angular 和 Required 一起使用
- 使用 Durandal 和 Required 的静态模块声明
- jquery form.validate conditional required
- 莫兹拉插件.required(SDK/tabs).attach() 不起作用
- Angular:如何绑定到required/ngRequired
- ngRequired和angular中的自定义指令
- Using functions inside scripts required by NodeJS's requ
- 如何使PrimeFaces中inputText的Required Message消失
- $error.required OR(原始和空值)上的角度必需消息
- Javascript验证所有字段的Required属性
- 是否可以收集或调用所有包含'required'属性为Javascript中的一个事件
- Ng-required,如何在输入之间使用它