CODEWITHSUNDEEP
javascriptjqueryangularionic-framework
Cristopher Rosales
Cristopher Rosales

Reputation: 476

Ionic v1 / Angular - Remove Previous ion-view from DOM

I am modifying an App written in Ionic v1.

There is a main View called 'Client's Profile' which has links to two other Views: Support Request and Complaints.

Inside the Support Request views there is a TextArea with Id "description", there is also a function that it's called when a button is tapped which gets the content of this textarea with jQuery.

var request_description = $("#description").val();

After the execution of this function, you come back to the Main View (Client's Profile).

If then you open the 'Complaints' View, here there is also a textarea with id "description" and there is another function that does the same and get's the content of this textarea with the same code above using jQuery.

The problem is that this code fails because the ion-view of the previously opened 'Support Request' is still present in the DOM -i.e. the first occurence of the element with id "description" is matched, which belongs to the previous view and not the currently visible-. I understand that probably the problem is using a selector to get a value directly from the DOM and that this is against what you are supposed to do, but since this is old code, and I don't have the time to change it around too much...

1) My question is why is this happening, is this the normal behavior of Angular -to keep previous views in the DOM- or am I missing something?

2) Appart from giving each text area a different id, what can I do to either delete the previous ion-view from the DOM or prevent this behavior entirely.

Upvotes: 0

Views: 269

Answers (1)

Cristopher Rosales
Cristopher Rosales

Reputation: 476

After some digging, I found that inside my app.js I had the following code that triggered the switch between views:

        .state('app.Complaints', {
            url: '/Complaints',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/Complaints.html',
                    controller: 'ComplaintsCtrl'
                }
            }
        });
        .state('app.SupportRequest', {
            url: '/SupportRequest',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/SupportRequest.html',
                    controller: 'SupportRequestCtrl'
                }
            }
        });

Here the controller is binded to an HTML template, and the Url of this view/Controller is declared. In here, you can add a new prop to the object that you pass to this initialization. This prop is called cache and it can be set to false in order to stop the view from staying in the DOM after you leave it. So after modifying my app.js the old ion-view containers dissapeared from the DOM after I left said view.

.state('app.Complaints', {
            cache: false,
            url: '/Complaints',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/Complaints.html',
                    controller: 'ComplaintsCtrl'
                }
            }
        });
        .state('app.SupportRequest', {
            cache: false,
            url: '/SupportRequest',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/SupportRequest.html',
                    controller: 'SupportRequestCtrl'
                }
            }
        });

Upvotes: 0

Related Questions