15

簡単な例:

true または false に相当するルーティング パラメーター (/Home/:isLoggedIn) があります。(/Demo/#/Home/false) とコントローラーのプロパティ

this.loggedIn = this.routeParams.loggedIn;

それぞれ ng-if 属性を持つ 2 つの要素を持つビュー (Home.html) があります。

<div ng-if="home.loggedIn">
    Logged In!
</div>
<div ng-if="!home.loggedIn">
    Not Logged In...
</div>

/Demo/#/Home/true に移動すると、最初の要素が表示され、2 番目の要素は表示されません。/Demo/#/Home/false に移動すると、最初の要素は表示されず、2 番目の要素も表示されません。

私は、loggedIn の値が実際には false である場合、!home.loggedIn パラメーターが true に評価されることを期待します。

ここで何かアドバイスはありますか？

4

2 に答える 2

31

routeParams.loggedIn彼の問題が文字列であるという事実に根ざしていることは明らかです。

したがって、解決策は非常に明白です。

// Change that:
this.loggedIn = this.routeParams.loggedIn;

// To this:
this.loggedIn = this.routeParams.loggedIn === 'true';

しかし、なぜ奇妙な振る舞いなのですか？'false' の
ときに何も表示されないのはなぜですか?loggedIn

さて、ここに理由があります：

このngIfディレクティブは、次のtoBoolean()関数を使用してその値をブール値に変換します。

function toBoolean(value) {
  if (typeof value === 'function') {
    value = true;
  } else if (value && value.length !== 0) {
    var v = lowercase("" + value);
    value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
  } else {
    value = false;
  }
  return value;
}

文字列が渡されるtoBoolean()と、それを小文字に変換し、(とりわけ) 'false' に等しいかどうかをチェックします (この場合は を返しますfalse)。trueこれは、ブール値にキャストするときに空でない文字列を解釈するデフォルトの JavaScript 実装とは異なります。

ngIfそれでは、両方の s の2 つのケースを調べてみましょう。

  1. loggedIn === 'true'

    ngIf1 は評価しhome.loggedInます --> 'true' (文字列)
    ngIf1 はこの値を渡しますtruetoBoolean()
    toBoolean('true')を返します(偽と見なされる文字列と一致しない文字列が表示されるため) ngIf1 はそのコンテンツをレンダリングします

    ngIf2 は!home.loggedIn<=>を評価し!'true'ます --> false (ブール値)
    (これは、空でない文字列がたまたま true に評価されるために発生します)
    ngIf2 はこの値をfalsetoBoolean()
    toBoolean(false)を返します ngIf2 はそのコンテンツをレンダリングしません

  2. loggedIn === 'false'

    ngIf1 は評価しhome.loggedInます --> 'false' (文字列)
    ngIf1 はこの値を渡しますfalsetoBoolean()
    toBoolean('false')を返します(偽と見なされる文字列を見ているため ngIf1 はそのコンテンツをレンダリングしません

    ngIf2 は!home.loggedIn<=>を評価し!'false'ます --> false (ブール値)
    (これは、空でない文字列がたまたま true に評価されるために発生します)
    ngIf2 はこの値をfalsetoBoolean()
    toBoolean(false)を返します ngIf2 はそのコンテンツをレンダリングしません

したがって、これは「奇妙な」動作を説明しています（できれば理解できる方法で）。

于 2014-04-09T16:24:37.797 に答える
1

問題は、home.loggedIn が文字列である可能性が高く、ng-if に渡されると、おそらく文字列から bool への変換を評価して実行し、値「false」を false に取得します。!"false" がある場合、式の評価前に値が渡されますが、これは実際には false であり、どの文字列も true であるため、それを否定すると false になります。

于 2014-04-09T16:09:14.133 に答える