Angular：如何绑定到required / ngRequired

Question

我有这个指令，可以是必需的。它可以以两种方式使用（据我所知）

class scenario
{
public:
    int id;
    std::vector<std::vector<int> > demandes;

    scenario() {}
    void setid(int i) { id=i; }
    void setdemande( std::vector<int>  v) { demandes.push_back(v); }
    int getid() const { return id; }
};

Scenario.resize(nb_scenario);
for (int i = 0; i < nb_scenario; ++i)
{
    Scenario[i].setid(i);
}
    int s;

    for(int i=0; i<nb_periode ; i++) {
        fichier >> s ;
        for(int j=0;j<nb_produit;j++){
            fichier >> s ;
                for(int k=0;k<nb_scenario;k++){
                    fichier >> s;
                    Scenario[k].demandes[j][i]= s; //Error here
                }
        }                
    }

或

<my-foo required></my-foo>

所以，因为require and ngRequire are basically the same thing你会认为该指令可以做到这一点

HTML：

<my-foo ng-required="data.value > 10"></my-foo>

JS：

<my-foo ng-require="data.isRequired"></my-foo>

DEMO

嗯，不，这不起作用，... .directive('myFoo', function () { return { restrict: 'E', scope: { required: '=' } ... 是scope.require。您实际上必须将范围定义更改为

undefined

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

Answer 1

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

1。支持ng-model

的自定义表单元素

如果您查看ng-required指令源代码，您会发现它只处理ng-model controller：

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>