Как уменьшить параметр для директивы AngularJS ng-if?

Быстрый пример:

Существует маршрутизируемый параметр (/Home/: isLoggedIn), который равен true или false. (/Demo/#/Home/false) и свойство контроллера

this.loggedIn = this.routeParams.loggedIn;

У меня есть представление (Home.html), которое имеет два элемента, каждый с атрибутом ng-if.

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

Если я перейду к /Demo/ #/Home/true, тогда отобразится первый элемент, а второй - нет. Если я перейду к /Demo/ #/Home/false, то первый элемент не отобразит NOR, второй -.

Я бы ожидал, что параметр! home.loggedIn будет равен true, если значение loggedIn является фактически ложным.

Любой совет здесь?

Ответы

Ответ 1

Совершенно очевидно, что проблема у него сводится к тому, что routeParams.loggedIn является строкой.

Итак, решение вполне очевидно:

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

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

Но почему странное поведение?
Почему работа не показывает ничего, когда loggedIn является "ложным"?

Ну, вот почему:

В директиве ngIf используется следующая функция toBoolean() для преобразования ее значения в boolean:

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). Это отличается от реализации JavaScript по умолчанию, которая интерпретирует любую непустую строку как true при литье в boolean.

Итак, рассмотрим два случая как для ngIf s:

  • loggedIn === 'true'

    ngIf1 оценивает home.loggedIn → 'true' (string)
    ngIf1 передает это значение через toBoolean()
    toBoolean('true') возвращает true (потому что он видит строку, которая не может совпадать с какой-либо строкой, считающейся ложной)
    ngIf1 отображает его содержимое

    ngIf2 оценивает !home.loggedIn <= > !'true' → false (boolean)
      (это происходит потому, что любая непустая строка имеет значение true) ngIf2 передает это значение через toBoolean()
    toBoolean(false) возвращает false
    ngIf2 не отображает его содержимое

  • loggedIn === 'false'

    ngIf1 оценивает home.loggedIn → 'false' (строка)
    ngIf1 передает это значение через toBoolean()
    toBoolean('false') возвращает false (потому что он видит строку, которая считается ложной
    ngIf1 не отображает его содержимое

    ngIf2 оценивает !home.loggedIn <= > !'false' → false (boolean)
      (это происходит потому, что любая непустая строка имеет значение true) ngIf2 передает это значение через toBoolean()
    toBoolean(false) возвращает false
    ngIf2 не отображает его содержимое

Итак, это объясняет "странное" поведение (надеюсь, понятным образом).

Ответ 2

Проблема, вероятно, home.loggedIn - это строка, когда она передается в ng, если она, вероятно, оценивает и выполняет преобразование из строки в bool, чтобы получить значение "false" в false. В оценке выражения до того, как значение будет передано, если у вас есть! "False", который фактически является ложным, поскольку любая строка является истиной, отрицание становится ложным.