2017-05-03 5 views
0

私はこのような話題について、SOやウェブ全体でいくつかの質問を見てきました。具体的には、one clear exampleに従ってみましたが、自分のコードで動作させることができません。私はplunkerを持っています。その例に従いますが、動作しません。AngularJSコンポーネントが属性値の変更に反応しないのはなぜですか?

  • コンポーネントがリスト内の各項目に対して1つのチェックボックスを表示する(属性として指定するコンポーネントがページに通信するための値を変更することがないように、一方向に結合しなければならない)
  • 場合一方とチェックボックスが1つしかチェックされていない場合、コールバック関数を呼び出して ビットのXorが真であることをページに伝えます。
  • すべてのチェックボックスをクリアするコールイン関数があります。
  • 表示されるコンポーネントのビットリストに項目を追加するビットが追加されています
  • (この問題を解決するには、以前のPlunkerとは別の問題があります)表示するビットのリストには、コンポーネントコントローラに$watch()があります。今すぐ呼び出されましたが、私の最終目標に近いものは、新しいチェックボックスがクリアされるのではなく最初に設定されていることを確認することです。

$watch()は、ページが読み込まれる(コンポーネントが作成される)と同時に発生します。ただし、ボタンをクリックしてビットを追加すると、チェックボックスを作成するng-repeatは発生しますが、$watch()は発生しません。

答えて

1

時計コレクションを使用します。それについてはhereを読んでください。あなたのplunkrに塗布された溶液は、あなたはまた、時計に「真」の三番目のパラメータを追加することでチェック「深い」オブジェクトを使用することができ、この

$scope.$watchCollection(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    });

An update version of your plunk

だろう。しかし、これは非常に "高価" とwatchCollection一度はお勧めしませんが1.2.xので

$scope.$watch(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    },true); // The TRUE is a deep checking and also works but is "expensive"

+0

恐ろしい紹介されました!私はこれを十数回投票することができればと思います。ありがとう! –

+0

ようこそ。がんばろう! –

関連する問題