Here is an example of my controller in AngularJS.
angular.module('homePage').controller('buttonViewCtrl', [function() {
console.log(this);
this.buttonDisplay = false;
console.log(this);
this.nav = function() {
console.log(this);
this.buttonDisplay = true;
};
this.closeNav = function() {
console.log(this);
this.buttonDisplay = false;
};
}])
The first console.log statement logs an empty object initially.
The second console.log statement logs the controller object with a added property called buttonDisplay.
https://i.sstatic.net/WMnla.png
The third console.log statement (inside nav()) logs the controller object along with all its methods:
https://i.sstatic.net/dN9yb.png
The fourth console.log statement logs the same object with the updated buttonDisplay property.
https://i.sstatic.net/79dBj.png
I have some questions regarding this code snippet.
1) In this case, when the nav() method is executed, it seems that Angular automatically attaches all other controller methods to the controller object as well, even without them being triggered. This behavior is different from what I expected. Can you explain how Angular achieves this?
2) As per best practices in Angular development, it's recommended not to manipulate the DOM directly within controllers. In my case, the nav() function displays a navigation bar template and the closeNav() function hides it. Do you think this qualifies as DOM manipulation or am I incorporating too much presentation logic into the controller?