Ionic-framework: feat: ng-if doesn't work with ion-content

[cfz42]

Type: feat

Platform: all

Hi, I'm not sure whether this is intentional or not but I can't get ng-if to work with <ion-content>.
Indeed, when doing so, I get a :
Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

The problem seems to come from the scroll, if I add <ion-content scroll="false" ng-if="vm.bool"> it works. Also, ng-show/ng-hide does work fine and I'm currently using this but I guess it would be nice to be able to use ng-if.

Another workaround is to wrap the <ion-content> in a <div ng-if="vm.bool">

[vvl]

I have encountered the same issue with ng-if not working with ion-content. The workaround to wrap the <ion-content> in a <div ng-if="vm.bool"> worked.

[andreialecu]

Was also hit by this. I don't see any reason why this wouldn't work, looks like something that should be fixed.

[jgw96]

Hello! Are you still experiencing this issue?

[jgw96]

Hello! Thanks for opening an issue with us! Since it has been a little while since there was any activity on this issue i will be closing it, but feel free to respond back if your still having the issue! Thanks again!

[meticoeus]

ng-if is currently working for me on ion-content. However, I get an uncaught exception in the console on views using this.

TypeError: Cannot read property 'clientHeight' of undefined
    at child.initialize (vendor.js:29592)
    at child.ionic.views.View (vendor.js:27077)
    at new child (vendor.js:26041)
    at new <anonymous> (vendor.js:80196)
    at invoke (vendor.js:48994)
    at Object.instantiate (vendor.js:49002)
    at vendor.js:53558
    at prelink (vendor.js:82799)
    at invokeLinkFn (vendor.js:53194)
    at nodeLinkFn (vendor.js:52673)
    at compositeLinkFn (vendor.js:52085)
    at nodeLinkFn (vendor.js:52689)
    at compositeLinkFn (vendor.js:52085)
    at publicLinkFn (vendor.js:51960)
    at self.appendViewElement (vendor.js:79546)
    at Object.render (vendor.js:77651)

Update: I'm using scroll=false with ion-scroll nested inside of the ion-content where I need the scrolling functionality so that may be why its working.

[twinssbc]

@jgw96 I can still reproduce it in version 1.2.4
Below is the sample. I added ng-if in home.html
http://plnkr.co/edit/wSqvxrnrRY7WMEmXZySi?p=preview

It will cause the createScrollbars method fail and the list in the ion-content can't be scrolled.

Error: HierarchyRequestError: DOM Exception 3
appendChild@[native code]
__createScrollbars@http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js:5564:37
initialize@http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js:4962:28
View@http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js:4500:26
child@http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js:3464:49
http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js:20938:58

[ghost]

Issue still perstists, newest version (Not ionic2beta)

ionic.bundle.js:25642 Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Error (native)

Works on some pages, not others, very inconsistent.

NOTE: Setting "scroll="false"" removes the error, but... I kinda need scrolling.

Wrapping the ion-content in another div using the ng-if also works

[Simerjit-developer]

having same issue:

TypeError: Cannot read property 'clientHeight' of undefined
    at ionic.views.ScrollNative.ionic.views.View.inherit.initialize (http://localhost:8100/lib/ionic/js/ionic.bundle.js:6999:43)
    at ionic.views.View (http://localhost:8100/lib/ionic/js/ionic.bundle.js:4484:21)
    at new child (http://localhost:8100/lib/ionic/js/ionic.bundle.js:3448:44)
    at new <anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:57540:36)
    at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17762:17)
    at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17770:27)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:22326:28
    at prelink (http://localhost:8100/lib/ionic/js/ionic.bundle.js:60143:24)
    at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21962:9)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21441:11) <!-- ngIf: restaurants -->

Any solution please?

Basically, I want to check whether variable has value or not in the view.

[meticoeus]

@Simerjit-developer Current workaround is wrap your content in an extra div and put the ng-if there.

The wrapper can be directly inside or outside of ion-content.