分度器by.binding（）は2つのバインディングを返します

Question

私はAngularJs 1.6と分度器を使ってe2eテストを行っています。

私は私のHTMLテンプレートに次のコード

<h1>{{exercise.a}} * {{exercise.b}}</h1>

次に分度器で、私はページをテストし、そのバインディングの値を取得したいよを持っています。私は

element(by.binding('exercise.a')).getText().then(console.log)

を行うと、私は結果が'9'ことを期待しながら、結果はすなわち'9 * 2'exercise.aとexercise.bの組み合わせです。私はexercise.bという値、すなわち'9 * 2'を取得しようとしたときと全く同じ結果が得られますが、これは'2'です。

回避策を見つけるにはしばらく時間がかかりました。私はこれに私のコードを修正した後、それが適切に

<h1><span>{{exercise.a}}</span> * <span>{{exercise.b}}</span></h1>

作業を開始何かが一つに両方のバインディングを組み合わせたようです。

なぜそれが起こるのか、回避策なしで動作させる方法を説明できる人がいますか。

Answer 1

私の理解を深めるために、Angularはh1タグをウォッチャーでexercise.aとexcercise.bに関連付けています。 h1タグの内側の本文がテキスト9 * 2に置き換えられたため、元のバインディングは削除されました。

角度は、ウォッチャーと一緒に補間関数を記憶するので、いずれかが変更されたときに新しい値が再計算されるようになります。

つまり、両方のバインディングは、あなたのケースにあるh1の本体を指しています。9 * 2。それらを分離させる唯一の方法は、ラッパー要素（例ではスパン）を使用するか、ng-bindを使用することですが、再度2つの要素が必要です。