Как отследить поведение элемента массива ngModel, используя.directive

Question

Привет всем, я использую angularjs не так давно, и теперь у меня есть одна проблема, связанная с этой структурой, которую я не могу решить. Итак, проблема в следующем: у меня есть несколько полей ввода, которые генерируются с помощью ng-repeat:

<div class="form-group" ng-repeat="(i, name) in name_list track by $index">
<div class="row">
    <div class="col-xs-12">
        <input class="form-control" type="text" ng-model="data.name_list[i]" add-input/>
    </div>
</div>

Где name_list какой-то массив с данными. В результате я сформировал поля ввода. Далее, что я хотел сделать, это добавить новое поле ввода, если все предыдущие поля были $ грязными для этой вещи, я написал следующий угловой код:

userApp.directive('addInput', ['$compile', '$sce', function ($compile, $sce) {
return {
    restrict: 'A',
    require: '?ngModel',

    link: function (scope, element, attrs, ngModel) {

       scope.inputCounter = scope.name_list.length;

       scope.$watch(
           function(){
                 return ngModel.$dirty
           },

           function(dirty_val){
               if (dirty_val){

               scope.name_list.push(ngModel.$modelValue);
               }
           }
       );
    }
}}]);

но, конечно, этот код работает неправильно (он добавляет новое поле, если, наконец, одно поле $ грязное) Я знаю, почему это работает неправильно, но я не знаю, как отслеживать все ng-модели отдельно, я не знаю, как получить доступ к некоторой модели, такой как ngModel[1], так что я надеюсь, что кто-нибудь поможет мне в этом, спасибо

Answer 1

Вы можете добавить родительскую директиву, которая будет собирать грязные элементы, и добавит новый элемент, как только он обнаружит, что все другие элементы являются грязными:

Проверьте этот поршень.

HTML:

<div collect-input>
    <div class="form-group" ng-repeat="(i, name) in name_list track by $index">
    <div class="row">
        <div class="col-xs-12">
            <input class="form-control" type="text" ng-model="data.name_list[i]" add-input/>
        </div>
    </div>
</div>

Как только addInput обнаружит, что он грязный, вызовите родительский директивный контроллер:

if (dirty)
    collectInput.reportInput();

JS:

directive('collectInput', function() {
  return {
  restrict: 'A',
  controller: function($scope) {
    var dirtyCount = 0;
    this.reportInput = function() {
      var count = $scope.name_list.length;
      dirtyCount++;
      if (count === dirtyCount) {
        $scope.name_list.push('aaa');
      }
    }
  },
  }
}).
directive('addInput', ['$compile', '$sce', function ($compile, $sce) {
return {
    restrict: 'A',
    require: ['^collectInput', '?ngModel'],

    link: function (scope, element, attrs, ctrls) {
       var collectInput = ctrls[0]
       var ngModel = ctrls[1];
       scope.inputCounter = scope.name_list.length;

       scope.$watch(
           function(){


     return ngModel.$dirty
       },

       function(dirty_val){
           if (dirty_val){
             collectInput.reportInput();
           }
       }
   );
}
}}]);