0

我想使用angularjs.

这是小提琴。

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

当我尝试在 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 构建树）

4

2 回答 2

1

正如您所说的“您现在没有时间在 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中的说明重写它。

于 2013-07-24T13:52:34.277 回答
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的是，inng-click来自ng-repeat表达式。

于 2013-07-24T12:11:46.047 回答