Why are we NOT supposed to mix DOM code with Angular code?

user_17516801 0
Viewed 46

I am designing a master and child grid in which by clicking on a row of the master grid, data in the child grid changes accordingly. To do so, after clicking on a row of the master grid, I call reloadItmes() from the child controller like below:

$("#masterTable tbody").on("click", "tr", function (event) {
    event.preventDefault();
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    angular.element($('#childTable')).scope().reloadItems();
});

However, I found out that mixing DOM code with Angular code is not a good practice, but I don't know what problem this piece of code could cause.

angularjs dom html jquery
1 Answers

because of the conflicts between angular scope and dom. actually they are in different time cycles and it is not a good idea to mix them both with each other. I had this problem and at last I had to call a fake function in angular to force it to read my dom changes and apply them. It is totally a synchronization problem.

so if you could put both code portions into one controller or either do it all in pure js the result would have better performance and it is much easier to expand or understand.

user_103235320
Related