Recently, in the implementation of the angular project, the instruction ui-tree was customized, and a problem was found in the test phase:
First, describe the function of instructions: request the first level data of the tree from the server when the instructions are initialized, trigger the click event to request the corresponding sub-node data from the server when clicking on a node, combine the obtained data by splicing HTML strings, element. append to the current node. Then the data is bound and rendered to the page through the $compile service. The key codes are as follows:
$compile ($("[fatid]") (scope); // compile according to attributes
In the testing phase, I found a problem that when I click on a node, it triggers multiple click events, and the deeper I click, the more clicks I automatically start.
Cause: My code binds click events to the Dom elements passed in during the $compile compilation process. When I click on a node, $compile executes once, and the corresponding executes a binding event. If the parameter in $compile is the same Dom, it becomes a Dom node that has been bound to multiple events. So the problem of one click triggering multiple executions occurs during the test phase.
Modification: Each compilation only generates new nodes, which can avoid being bound to the same event many times.
The modified code: