データ変更時にng-repeatを更新します

現在、私はAngularJSを学んでいます。データ変更時にng-repeatを更新します

私は、私は、オブジェクトのデータが更新されるディレクティブから生成した一連のボタンを更新しようとして立ち往生しています。

私はディレクティブで作成されていないデータが無駄に更新されない場所のために同様の問題に対処する記事の数を読みました。

HTML

<body> 
    <div id="application" data-ng-app="ApplicationDirective" ng-controller="ApplicationController" class="container-fluid"> 
     <side-panel class="col-lg-2"></side-panel> 
     <div ng-controller="HomeController" class="content col-lg-10"> 

     </div> 
    </div> 
</body>

あなたは、私は2つのコントローラを定義している見ることができるように。 1 ApplicaitonControlerを使用してアプリケーション全体を管理し、次にHomeControllerを使用してHMTLの内部セクションを管理します。

次に、サイドパネル用の一連のボタンを生成するディレクティブがあります。上記ApplicationContollerで定義されているため

var app = angular.module('ApplicationDirective', []); 

app.directive("sidePanel", function() { 
    return { 
     restrict: "E", 
     template : "<div>" + 
        "<input ng-repeat='btn in sidePanelButtons' type='button' value={{btn.value}}>" +    
        "</div>" 
    }; 
});

$scopeデータ。次に、HomeControllerのデータを更新します。この時点で

app.controller("HomeController", function($scope) { 
    $scope.sidePanelButtons = $scope.sidePanelButtons.concat([ 
     {value:"TEST"} 
    ]); 
});

、私はsidePanelButtonsのVARをログインした場合、私はHTMLの変更では何もしかし、データが正常に追加されたことを見ることはできません？。私は$スコープを使用して試してみました。$方法を適用

は、しかし、私はerrorを取得します。

潜在的に私は間違った設計方法論を持っているので、任意の助けいただければ幸いです。

出典

2016-04-28 Zze

を参考にしてください：代わりに '$ timeout'を試してください。 '$ scope。$ apply'を自動的に行っています。 – Beat

concat()

方法は、新しい配列を返します。

あなたは

$scope.sidePanelButtons = $scope.sidePanelButtons.concat([ 
    {value:"TEST"} 
]);

を行うときにあなたはApplicationController範囲内sidePanelButtons配列への参照を壊し、にHomeControllerスコープに新しいsidePanelButtonsプロパティを作成しています。あなたのサイドパネルの指示は変更されていないApplicationControllerのスコープを見ています。

代わり$scope.sidePanelButtons.push()を行います。

出典

2016-04-28 06:03:11

面白い、面白い、それは多くの意味がある、私はこれをできるだけ早くテストします。 – Zze

だから私はちょうどこれを試して、それは仕事の種類、しかし、今私はオブジェクトに2つの新しい値をプッシュしようとしたにもかかわらず、3つのオリジナルのボタンと1つの空白のボタンがあります..？ '$ scope.sidePanelButtons.push（[ \t \t {値： "TEST1"}、 \t \t {値： "TEST2"} \t]）;' – Zze

@Zze私にはわからないものを、あなたの 'NGリピート'繰り返しを繰り返しますが、理想的には、オブジェクトの配列ではなく、$ scope.sidePanelButtons.push（{値：" TEST1 "}、{値：" TEST2 "}）;のようなオブジェクトをプッシュする必要があります。 –

はあなたが別のコントローラからのコントローラの$の範囲を更新することはできません。この

var app = angular.module('myApp', []); 
 

 
app.directive("sidePanel", function() { 
 
    return { 
 
     restrict: "E", 
 
     scope: { 
 
     \t buttons: '=' 
 
     }, 
 
     template : "<div>" + 
 
        "<input ng-repeat='btn in buttons' type='button' value={{btn.value}}>" +    
 
        "</div>" 
 
    }; 
 
}); 
 

 
app.controller("ApplicationController", function($scope) { 
 
\t \t $scope.sidePanelButtons = [ 
 
     {value:"TEST"} 
 
    ]; 
 
});

出典

2016-04-28 06:11:53

を試してみてください。 $ scopeはすべてのコントローラでローカルなので、ログに表示される更新値はApllicationControllerではなくHomeControllerに属します。同じコントローラーでデータを定義して更新するか、実際に2つのコントローラーから同じデータセットにアクセスする必要がある場合は、サービスを使用してください。

もう1つの方法は、$ scopeの代わりに$ rootScopeを使用して、すべてのコントローラで使用できるようにすることです。

app.controller("HomeController", function($scope, $rootScope) { 
$rootScope.sidePanelButtons = $rootScope.sidePanelButtons.concat([ 
    {value:"TEST"} 
]); 
}); 

app.controller("ApplicationContoller", function($scope, $rootScope) { 
$rootScope.sidePanelButtons = //define here; 
});

しかし、あなたの指示に別の問題があると思います。sidePanelButtonsのような変数にアクセスするには、ディレクティブからコントローラ$ scopeにアクセスする必要があります。この問題を解決するには、Access controller scope from directive

出典

2016-04-28 06:12:48

これは当てはまりません。子スコープは親スコープからプロトタイプ的に継承されるため、親スコープのオブジェクトプロパティを更新できます。 –

Angularが{{variable}}を評価すると、nameプロパティの指定された要素に関連付けられたスコープが最初に参照されます。そのようなプロパティが見つからない場合は、ルートスコープに達するまで親スコープなどを検索します。 JavaScriptでは、この動作はプロトタイプの継承と呼ばれ、子スコープはプロトタイプ的に親から継承します。しかし、ここではそうではありません。コントローラの内部では、$ scopeはローカルコピーを参照します。コントローラがネストされている場合、$ scope. $ parent.sidePanelButtonsを記述すると、子コントローラは親コントローラ$ scope.sidePanelButtonにアクセスできます –

* "これはここにはありません" * - なぜですか？それはここの場合です。 * "コントローラがネストされている場合、$ scope。$ parent.sidePanelButtonsを記述すると、子コントローラは親コントローラ$ scope.sidePanelButton *にアクセスできます。しかし、それはここで全く必要ありません。 –

データ変更時にng-repeatを更新します

答えて

関連する問題