Angular:如何绑定到required/ngRequired

我有这个指令,可以是必需的.它可以以两种方式使用(据我所知)

要么

所以,因为require和ngRequire基本相同的东西你会认为该指令可以做到这一点

HTML:

JS:

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

DEMO

嗯,不,这不起作用,scope.require是undefined.您实际上必须将范围定义更改为

scope: {
    required: '=ngRequired'
}

所以问题是什么是处理这两种情况的首选方法,以便将值存储在scope.required？我应该从链接功能中定义两者还是使用attrs？

您可以选择基本上有两种方法:

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-requiredie:

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