ngIf repeats itself instead of updating itself in 1.2.0

[jnizet]

Elements using ngIf aren't updated (or removed and recreated) when using a string as the condition and this string changes. This worked fine in angular 1.2.0-rc2, but doesn't work in 1.2.0.

See this plunkr for example: http://plnkr.co/edit/b6CUTqTbZIAhhZYMOXBu?p=preview

Fill me: <input type="text" ng-model="test" /><br/>
Show when filled:
<span ng-if="test">
  I'm added when the text is filled.
</span>

Each time a new char is added to the textbox, a new span is added to the page.

Workaround: use a real boolean condition:

Fill me: <input type="text" ng-model="test" /><br/>
Show when filled:
<span ng-if="!!test">
  I'm added when the text is filled.
</span>

[lucsky]

Confirmed, it happens in one of my apps. Angular 1.2.0 is broken in many different ways which is ironic for a framework that Google advertises as inherently testable... :>

[igorzg]

Thy exchanged behavior, according to new documentation on http://docs.angularjs.org/api/ng.directive:ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

So this is not a bug...

[jnizet]

@igorzg The I would see it as a bug of the documentation in addition to a bug in the implementation :)
IMHO, ngIf is supposed to do what anyone would expect from a directive with this name: if the expression is falsy, the node shouldn't be in the dom, and if it's truthy, it should be in the DOM. Having several instances of the node is just not acceptable for ngIf.

[igorzg]

@jnizet I agree with you, if expression property is empty that should be false and it make no sense for us to pass it to ngif as boolean notation ( ng-if="!test" -> false and ng-if="!!test" -> true ) , that make no sense :).

But bug is in this function while is ng-if="test":

function toBoolean(value) {
  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;
}

because if you type f or 0 or no or n or [] or false in input field ngif will not show a expected behavior it will not clone element as is specified in documentation.

And when is evaluated as boolean ( ng-if="!test" -> false and ng-if="!!test" -> true ) when value is always true or false then it works.

[igorzg]

@jnizet This one is not closed , the ticket #4863 is closed because it's duplicate to this ticket :D

[IgorMinar]

my reduction: http://plnkr.co/edit/z8sIwP7SdCVYJp03POU9?p=preview

and a quick fix without tests: IgorMinar/directives-workshop@92c7fec

[matthughes]

I do have a pull request for this with tests (PR 4894). Is this the right fix?