Binding stops working in input within ng-if

Question

For some reason binding doesn't work on an input within ng-if block in a directive

so this, doesn't 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 outside of directive or without ng-if. Wrapping input inside of a div with ng-if not helping. Is it a bug?

jsbin link

Answer 1

It is caused by the ng-if introducing a new scope combined with the fact that you ng-model "has not dot in it".

This works:

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

See the directive info at https://docs.angularjs.org/api/ng/directive/ngIf and notice the text "This directive creates new scope." For the "dot-in-model", see for example Does my ng-model really need to have a dot to avoid child $scope problems? or https://egghead.io/lessons/angularjs-the-dot Basically when reading the value it will be read correctly traversing scope prototypes, but when modifying the value it will be written to the very own scope.

Answer 2

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

ng-model='$parent.filterText'

Also, please check this answer.