Question

我想使用angularjs构建树。

这是Fiddle。

代码有效，但我的问题是：

当我尝试在5秒后添加新节点时，Jquery方法对添加的节点不起作用。所有其他工作都很好。

这是我要调用的方法：

$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
    var children = $(this).parent('li.parent_li').find(' > ul > li');
    if (children.is(":visible")) {
        children.hide('fast');
        $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
    } else {
        children.show('fast');
        $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
    }
    e.stopPropagation();
});
});

如何动态调用Jquery样式（添加/删除类）？

如果您想将Fiddler的代码放到那里，请告诉我。

谢谢，

顺便说一句，这个例子会很有用（如何使用angularjs构建树）

Answer 1

您应该使用ng-class进行动态分类，使用ng-click进行点击处理。

对于您的类绑定，您可以使用：

<li ng-class="{'icon-plus-sign': show, 'icon-minus-sign': !show}">

对于title属性，您可以简单地使用绑定：

<li title="{{show && 'Expand' || 'Collapse'}}" ...>

最后，在您的范围内，您需要一个单击处理来接收当前单击的节点：

$scope.clicked = function(node) {
  node.show = !node.show;
}

并在你的装订中：

<li ng-click="clicked(item)">

注意我正在考虑show属性是否反映节点是打开还是折叠。另外，为确保item中的ng-click来自ng-repeat表达式。

Answer 2

正如你所说“你现在没有时间在Angular中实现”，你可以获取所有jQuery代码，放入指令链接函数并在每个li元素中使用该指令。您也应该更改选择器。像这样：

angular.module('module', []).directive('treeNode', function() {
  return {
    link: function(scope, elm, attr) {
      if (elm.find('ul').length) {
        elm.addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
        elm.find('> span').on('click', function (e) {
          // your current code, changed as we did previously
        });
      } 
    }
  }
});

你应该装饰你所有的<li ng-repeat="..." tree-node>。您可以在此之后删除初始化代码。

在加载Angular之前，一定要加载jQuery lib。

免责声明：这不是首选方式，您应该像我在https://stackoverflow.com/a/17833690/179138中所说的那样重写它。

如何在angularjs中更改Tree结构时动态调用JQuery方法？

2 个答案: