angular.js - angularjs failed to bind scroll bar event

Question

Recently using angularjs as the management backend, I need to implement a requirement. Two separate tables can be scrolled horizontally at the same time, so the scroll event is bound to both tables. After the page is refreshed, it can be bound normally, but if It won't work after page switching or paging. At this time, when I check the binding time on the two tables, there are no events that I have bound = =
If I refresh the page, it is ok... Please give me some guidance T T

angular.element('#channelThead').bind('scroll',function(){
            setTimeout(function(){
                $('#channelTbody').scrollLeft($('#channelThead').scrollLeft());
            },100)
        })
angular.element('#channelTbody').bind('scroll',function(){
            setTimeout(function(){
                $('#channelThead').scrollLeft($('#channelTbody').scrollLeft());
            },100)
        })

Answer 1

Because you wrote it this way, the event is bound to the specific DOM element when these two statements are executed. When you switch or paging, the DOM is rebuilt and the event disappears unless you execute these two statements again.
In fact, in Angular, the best way to implement this requirement is to write the event binding in the directive and add instructions to these two tags.