AngularJS

Question

在 $watch 函数完成并呈现 html 之后是否仍然要监听事件？

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;           

  };

这里我想在执行 on_tree_data_change 并呈现 html 之后执行一个方法。

它仍然 returns 为空，甚至，我在监视监听器的末尾调用 document.getElementById("...")。我为树中的每个分支都有一个检查框，要求是在选中父分支复选框时检查树中的所有分支。但是当树折叠时，document.getElementById returns 复选框为空。因此，在扩展树时，这个 $watch 被调用并考虑调用 getElementById ... 在 $watch 完成后和呈现 dom 之后的所有复选框。

谢谢， Baskar.S

Answer 1

我建议您在树的分支上使用自定义指令。

(View)在将要渲染的DOM上，添加指令如branch-loaded，例如：

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

（控制器）然后执行该指令：

// 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
    };
});

您可以了解有关 angular js 指令的更多信息 here。

AngularJS - $watch 函数完成后的事件

AngularJS - Event after $watch function is complete

watch