2

ng-repeatそのテンプレートのコントローラーから配列を反復処理する内部で使用している分離スコープ ディレクティブがあります。テンプレートは次のとおりです。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="angular.min.js"></script>
    <script src="script1.js"></script>
  </head>

  <body ng-app="AddNewTest" ng-controller="AddNewController">
    <div class="items" ng-repeat="row in rows">
      <add-new-row data="row" index="$index"></add-new-row>
    </div>
  </body>

</html>

ディレクティブは次のように定義されます。

angular.module('AddNewTest', []).
directive('addNewRow', function ($timeout) {
  return {
    controller: 'AddNewController',
    link: function (scope, element, attribute) {
      element.on('keyup', function(event){
        if(scope.index + 1 == scope.rows.length) {
          console.log('keyup happening');
          $timeout(function () {
            scope.rows.push({ value: '' });
            scope.$apply();
          });
        }
      })
    },
    restrict: 'E',
    replace: true,
    scope: {
      index: '='
    },
    template: '<div class="add-new"><input type="text" placeholder="{{index}}" ng-model="value" /></div>'
  }
}).
controller('AddNewController', function ($scope, $timeout) {
  $scope.rows = [
    { value: '' }
  ];
});

しかし、新しい行を追加し$apply()て ng-repeat を実行した後でも、追加された新しいデータはレンダリングされません。助けてください。

Plnkr リンクはこちら

4

2 に答える 2

1

各 ng-repeat は、div と同じコントローラーを持つディレクティブ内で分離スコープを宣言するよりも、分離スコープを作成します。あなたは $scope スープで泳いでいます :)

独自のコントローラーを使用して、クリーンで独立したディレクティブを個人的に作成します。

angular.module('AddNewTest', []).
directive('addNewRow', function () {
  return {
    restrict: 'E',
    controller: MyController,
    controllerAs: '$ctrl',
    template: '{{$ctrl.rows.length}}<div class="add-new"><pre>{{$ctrl.rows | json}}</pre><input type="text" placeholder="0" ng-model="value" /></div>'
  }
}).
controller('MyController', MyController);

function MyController($scope) {
  var vm = this;
  this.rows = [ { value: '' } ];

   $scope.$watch("value",function(value){
     if(value)
      vm.rows.push({ value: value });
   });
}

http://plnkr.co/edit/AvjXWWKMz0RKSwvYNt6a?p=preview

もちろん、bindToController(scope:{} の代わりに) を使用して一部のデータをディレクティブにバインドすることもできます。ng-repeat が必要な場合は、ディレクティブ テンプレートで直接実行してください。

于 2016-08-30T10:13:33.787 に答える
1

次のように行の配列をディレクティブに渡します:-

 scope: {
  index: '=',
  rows :'='
},

<add-new-row rows="rows"  index="$index"></add-new-row>

ワーキングプランカー

于 2016-08-29T12:58:37.493 に答える