Binding stops working on ng-if input

Question

For some reason, the binding does not work at the input inside the ng-if block in the directive

therefore this does not work:

 app.directive 'foo', -> restrict: 'E' scope: type:'=' template: "<input ng-if=\"type === 'string'\" ng-model='filterText'> <div> {{filterText}} </div>" <foo type="'string'" /> 

it works fine without or without ng-if directive. Entering content inside a div using ng-if does not help. This is mistake?

jsbin link

Answer 1

This is caused by ng-if, which represents a new area, combined with the fact that you haven’t put ng-model in it.

It works:

 template: "<div ng-init='holder={}'> <input ng-if=\"type === 'string'\" ng-model='holder.filterText'></div> <div> {{holder.filterText}}</div>" 

See the information about the directive at https://docs.angularjs.org/api/ng/directive/ngIf and pay attention to the text "This directive creates a new scope." For a “point in model” see, For example, Does my ng model need to have an exact point to avoid problems with the $th daughter? or https://egghead.io/lessons/angularjs-the-dot Basically, when reading a value, it will be correctly read with the prototypes of spatial objects, but when the value changes, it will be written to its own area.

Answer 2

Since ng-if creates a new scope, you just need to do this

 ng-model='$parent.filterText' 

Also check this answer .

Answer 3

The <div> not closed in your example, and ng-if does not apply to this node.

Try the following:

 template: "<input ng-model='filterText'> <div ng-if=\"type === 'string'\"> {{filterText}}"</div>"