Sergey2014-06-24 14:18:00
Sergey, 2014-06-24 14:18:00

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

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)
                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.clickNodeLabel = function (node) {
                            if (!currentNodeChanging || currentNodeChanging(scope, { node: 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) {

                    if (!scope_treeView.childNodeTemplate)
                        scope_treeView.childNodeTemplate = template;

                //Rendering template.


Answer the question

In order to leave comments, you need to log in

1 answer(s)
Sergey, 2014-06-24
Protko @Fesor

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question