Having trouble manipulating the DOM

ionic-v1
1

This is a really weird problem that I cannot seem to solve! I am trying to change the text in an element (given the id and fetched by querySelector) and change it’s text from “hello” to “goodbye”. The code only seems to work once, then never again after that. I’ve tried refreshing and the text would just stay as “hello”. The only way I could solve this was by copy and pasting the example code back into it and then refreshing (Which is the really really weird part). I’m fairly sure it isn’t cache because I closed and reopened the browser too.

Here is my example code:

ionic.DomUtil.ready(function(){
  angular.element(document.querySelector('#testMe')).text("Goodbye");
});

I even added alert() statements in there to check if it’s the function that isn’t being called, but to my discovery the alert() invokes everytime. Which means that it is the dom function, right? Well I tested other dom functions and experienced the exact issue.

This is the strangest thing that has happened to me. If anyone could guide or help me that would be great!

2

Could you reproduce in a codepen?

3

Codepen is where I got the code from :frowning: I find it so so hard to explain. I am so sorry If I’m wasting anybody’s time with this question!!

4

Hi @wolve :smile:

Are you new to Angular? If so, this might take you some time and practice to wrap your head around! The intention with Angular is that you NEVER directly manipulate the DOM. The basic idea being that you’d set something on your scope via your controller which Angular would bind to your view and update it accordingly.

You could achieve what you’re trying to do in a number of ways… You could use ng-hide, ng-show, ng-if, ng-change, there are many ways to skin this cat.

You could even make that text you wish to display (Hello or Goodbye) part of your scope, and just bind that straight to your view. Then when appropriate in the controller, you can change the value and Angular will make sure your view changes accordingly.

Sorry if this is slightly vague, as @devqon1 mentioned, if you put up a CodePen we can manipulate I am sure someone will help :smile:

Good luck!

5

I am fairly new to angular.js indeed.

Here is the codepen of my app:

Code Pen of my crappily written app

Sorry about the code smell. I seriously was just doing testing, trying to understand the ionic acrhitecture. And hey, what’s programming without hacking and breaking things until we understand. I acknowledge I shouldn’t directly edit the DOM, but this just doesn’t work on my stack and it is bothering me!

As you can see it works. But it’s not working for me in my development stack.

Thanks,

Wolve

6

If you don’t manipulate the DOM with angular, how do you change styles dynamically? Here I am having problems trying to change an HTMLElements className. I have tried everything I can find, with no success.

Any help appreciated.