Angularjs: how to call $anchorScroll() after template compilation?

Question

Angular

This is essentially a treeview directive placed in a container with a limited height, and therefore we have a scroll . Using the setCurrentNode function, we move to the required node and scroll to the selected element. The problem occurs when creating a new node and moving to the selected position. As I understand it, the DOM ($ compile) model should be built first, and then the anchorScroll function will be called, but how?

.directive('treeModel', ['$compile', '$parse','$location', '$anchorScroll', function ($compile, $parse, $location, $anchorScroll) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var treeView = attrs.treeView;
                var treeModel = attrs.treeModel;
                if (!treeView || !treeModel)
                    return;
                
                var template;
                var scope_treeView = scope[treeView];
                if (scope_treeView && scope_treeView.childNodeTemplate)
                    template = scope_treeView.childNodeTemplate;
                else {
                    template =
                    '….';
                }
                if (attrs.angularTreeview) {
                    if (!scope_treeView) {
                        scope_treeView = {};
                        scope[treeView] = scope_treeView;

                        var currentNodeChanging = $parse(attrs.treeCurrentNodeChanging);
                        var currentNodeChanged = $parse(attrs.treeCurrentNodeChanged);
                        scope_treeView.clickNodeHead = function (node) {
                            //Свернуть или развернуть
                            if (!currentNodeChanging || currentNodeChanging(scope, { node: node })) {
                                node.collapsed = !node.collapsed;
                                scope_treeView.setCurrentNodeFromUser(node);
                            }
                        };

                        scope_treeView.clickNodeLabel = function (node) {
                            if (!currentNodeChanging || currentNodeChanging(scope, { node: node })) {
                                scope_treeView.setCurrentNodeFromUser(node);
                            }
                        };

                        scope_treeView.setCurrentNodeFromUser = function (node) {

                            if (scope_treeView.currentNode && scope_treeView.currentNode.selected) {
                                scope_treeView.currentNode.selected = undefined;
                            }
                            //set highlight to selected node
                            node.selected = 'selected';
                            //set currentNode
                            scope_treeView.currentNode = node;
                            if (currentNodeChanged)
                                currentNodeChanged(scope, { node: node });
                            while (node.parent) {
                                node = node.parent;
                                node.collapsed = false;
                            }
                        };

                        scope_treeView.setCurrentNode = function (node) {
                            scope_treeView.setCurrentNodeFromUser(node);

                            $location.hash(node.TaskId);
                            $anchorScroll();
                       };
                    }
                }
                else
                    if (!scope_treeView.childNodeTemplate)
                        scope_treeView.childNodeTemplate = template;

                //Rendering template.

                element.html('').append($compile(template)(scope));
            }
        };
    }]);

Answer 1

Wow, what a dumb code ... I would at least separate all this into separate directives and link everything through the treeView directive controller. Also read about isolated scopes and improve your code a little bit. I also hasten to please you - template directives can be defined as a function and operate on it. Also, you always have the opportunity to do something during compile. and in the link then it will not be necessary to do this.