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之后执行一个方法。

它仍然返回null，即使我在监听监听器的末尾调用document.getElementById（＆＃34; ....＆＃34;）。我为树中的每个分支都有一个chcekbox，并且要求在选中父分支复选框时检查树中的所有分支。但是当树折叠时，document.getElementById会为复选框返回null。因此，在扩展树时，这个$ watch会被调用，并且在$ watch完成之后以及渲染dom之后，想到为所有checke盒调用getElementById ....

谢谢， Baskar.S

Answer 1

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

（视图）在要渲染的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功能完成后的事件

1 个答案: