Angular: 如何绑定到 required/ngRequired

22 浏览
0 Comments

Angular: 如何绑定到 required/ngRequired

我有这个指令，它可以被要求或不要求。它可以以两种方式使用（据我所知）：

或者

因此，因为require 和 ngRequire 基本上是相同的东西，你会认为指令可以这样做：

HTML：

JS：

...
.directive('myFoo', function () {
    return {
    restrict: 'E',
    scope: {
       required: '='
    }
    ...

演示

嗯，不，这样不起作用，scope.require 是 undefined。实际上，你需要改变作用域的定义为

scope: {
    required: '=ngRequired'
}

所以问题是，处理这两种情况的首选方式是什么，以便将值存储在scope.required中？我应该同时定义两个还是使用链接函数中的attrs？

0

1 答案

0 Comments

在Angular中，我们可以使用ng-required指令来验证表单元素是否必填。然而，有时候我们需要自定义表单元素，并希望能够支持ng-required指令。那么，我们应该如何实现这个功能呢？

首先，我们可以选择使用自定义表单元素来支持ng-model。因为ng-required指令只处理ng-model控制器，所以如果我们的自定义指令支持ng-model，就已经支持了ng-required。具体代码如下：

angular.module('test', [])
.directive('myInput', function(){
  return {
    restrict: 'E',
    require: 'ngModel',
    scope: true,
    template: '
',
    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();
        };
    }
  };
});

另一种方法是包装现有的指令并传递ng-required属性。具体代码如下：

angular.module('test', [])
  .directive('myFormElement', function() {
      return {
        restrict: 'E',
        scope: {
          model: '=',
          required: '='
        },
        template: '
Enter number: 
'
  };
  });





  

    Is required:

在上述代码中，我们使用ng-required指令来验证输入的数字是否必填。当我们点击复选框时，通过改变data.required的值，来控制ng-required是否生效。

需要注意的是，在使用包装器的情况下，错误信息不再显示在包装器元素上，而是显示在内部的input元素上。为了解决这个问题，我们可以将内部的input元素的name属性设置为与包装器元素相同的值，这样错误信息就会正确地显示在包装器元素上了。

以上就是解决Angular中绑定到required/ngRequired的问题的两种方法。希望对你有所帮助！

0