Angularjs指令

外部コントローラデータを更新しない私はそのテンプレートのコントローラからアレイ上に反復されるIはng-repeat内部に使用している単離スコープディレクティブを有します。次のようにテンプレートは次のとおりです。次のようにAngularjs指令

<!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: '' } 
    ]; 
});

しかし、NG-repeatが新しいデータが追加レンダリングされていなくても、新しい行を追加し、$apply()をした後。助けてください。

Plnkr Link Here

出典

2016-08-29 jsbisht

あなたはディレクティブで** **分離株のスコープを持っています。ディレクティブに 'rows'の配列を渡します。この '範囲のよう：{ 度： '='、行： "=" }' 'AddNewController'コントローラの行を作成.Don't。 '' $ scope.rows = [ { '' 値}]を取り除きます。 –

これはどのように機能しますか？各値の入力？配列にプッシュするために使用される入力は1つだけですか？あなたはどんな結果を期待していますか？私は最後の行でからkeyupイベントに新しい行を追加したいと思い@gyc – gyc

。 – jsbisht

次のように指令への行のパス配列： -

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

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

Working plunker

出典

2016-08-29 12:58:37 jitender

助けてくれてありがとう。ディレクティブの定義からコントローラーを削除すると、行の更新時にng-repeatを更新するのに役立ちました。 – jsbisht

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

私はpersonnally独自のコントローラを備えた清潔で独立した指令になるだろう。それでもbindToControllerを使用してディレクティブにいくつかのデータをバインドすることができますもちろん

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

（代わりに、スコープの：{}）とあなたはNG-繰り返しが必要な場合は、直接指示テンプレートでそれを行います。

出典

2016-08-30 10:13:33 gyc

うん。私の悪い。私は作成した各指令に対して別々のコントローラを使用します。しかし、今回は、グローバルテンプレートと同じように再利用しようとしてしまった。 – jsbisht

答えて

関連する問題