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のは表情ng-clickから来ています。ng-repeat

于 2013-07-24T12:11:46.047 に答える