AngularJS - Event after $watch function is complete

Question

Is there anyway to listen for an event after the $watch function gets completed and the html is rendered?

scope.$watch('treeData', on_treeData_change, true);



on_treeData_change = function() {
    var add_branch_to_list, root_branch, _i, _len, _ref, _results;
    for_each_branch(function(b, level) {
      if (!b.uid) {
        return b.uid = "" + Math.random();
      }
    });
    for_each_branch(function(b) {
      var child, _i, _len, _ref, _results;
      if (angular.isArray(b.children)) {
        _ref = b.children;
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          child = _ref[_i];
          _results.push(child.parent_uid = b.uid);
        }
        return _results;
      }
    });
    scope.tree_rows = [];
    for_each_branch(function(branch) {
      var child, f;
      if (branch.children) {
        if (branch.children.length > 0) {
          f = function(e) {
            if (typeof e === 'string') {
              return {
                label: e,
                children: []
              };
            } else {
              return e;
            }
          };
          return branch.children = (function() {
            var _i, _len, _ref, _results;
            _ref = branch.children;
            _results = [];
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
              child = _ref[_i];
              _results.push(f(child));
            }
            return _results;
          })();
        }
      } else {
        return branch.children = [];
      }
    });
    add_branch_to_list = function(level, branch, visible) {
      var child, child_visible, tree_icon, _i, _len, _ref, _results;
      if (branch.expanded == null) {
        branch.expanded = false;
      }
      if (!branch.children || branch.children.length === 0) {
        tree_icon = attrs.iconLeaf;
      } else {
        if (branch.expanded) {
          tree_icon = attrs.iconCollapse;
        } else {
          tree_icon = attrs.iconExpand;
        }
      }
      branch.level = level;
      scope.tree_rows.push({
        level: level,
        branch: branch,                
        label: branch[expandingProperty],                
        tree_icon: tree_icon,
        visible: visible
      });
      if (branch.children != null) {
        _ref = branch.children;
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          child = _ref[_i];
          child_visible = visible && branch.expanded;
          _results.push(add_branch_to_list(level + 1, child, child_visible));
        }
        return _results;
      }
    };
    _ref = scope.treeData;
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      root_branch = _ref[_i];
      _results.push(add_branch_to_list(1, root_branch, true));
    }



     return _results;           

  };

Here I want a method to be executed after the on_tree_data_change gets executed and the html is rendered.

It still returns null, even, i call document.getElementById("....") at the end of the watch listener. I have a chcekbox for each branch in a tree and the Requirement is to check all the branches in a tree when the parent branch checkbox is checked. But when the tree is collapsed, document.getElementById returns null for the checkbox. So, on expanding the tree, this $watch gets called and thought of calling the getElementById ... for all the checke boxes after the $watch gets completed and after the dom is rendered.

Thanks, Baskar.S

why you can call your function at the end of the $watch callback ? — Narek Mamikonyan, Jan 31 '15 at 12:54
I thought watch itself acts like a listener for values.. So you want a listener over completion of a listener — Naeem Shaikh, Jan 31 '15 at 12:56

score 1 · Accepted Answer · answered Jan 31 '15 at 13:45

1

I would suggest you to use a custom directive on the branches of the tree.

(View)On the DOM that will be rendered, add a directive such as branch-loaded, for example:

<div class="branch" branch-loaded></div>

(Controller)and than implement that directive:

// a directive which is executed when the branch is rendered
myApplication.directive('branchLoaded', function() {
    return function(scope, element, attrs) {
      // functionality after the dom about the branch is rendered
    };
});

You can learn more about angular js directives here.

answered Jan 31 '15 at 13:45

Bardh Lohaj

1,402
1
9
17

Thanks for your solution. The directive function gets called before the dom gets rendered. Hence, document.getElementByid returns null. – user1578872 Jan 31 '15 at 15:15
no, the directive function gets called after the dom is rendered. Create a fiddle with your example so we can try it. – Bardh Lohaj Jan 31 '15 at 15:26
It works after adding a timer even with 0 delay. directive('branchLoaded',['$timeout', function (timer) { /* Note the injection of the $timeout service */ return { link: function (scope, elem, attrs, ctrl) { var select = function () { } timer(select, 0); // It works even with a delay of 0s } – user1578872 Feb 19 '15 at 12:25

AngularJS - Event after $watch function is complete

1 Answers1