angular-ui-tree：如何获取最后添加的节点的html元素

Question

也许这是一个愚蠢的问题，但我还没有在 Whosebug 或 angular-ui-tree.

的文档中找到解决方案

我需要获取最新添加的节点的html元素。

更准确地说，我在节点模板中有一个 xeditable 元素，我需要在创建新节点时显示和关注它。

我该怎么做。

感谢您的帮助。

Answer 1

我没有测试过，但我认为应该这样做：

[第 1 步] 在您的控制器中：

// Dummy data (please mind the IDs)

$scope.data = [{
    'id': 1,
    'title': 'node 1',
    'type': 'parent', // I like to flag them as well
    'nodes': [{
        'id' : 11,
        'title' : 'node 1.1',
        'type': 'child'
    }]
}];

// This will add the new item into your stack

$scope.newMenuItem = function() {

    $scope.data.push({
        id: $scope.data.length + 1,
        title: 'test ' + ($scope.data.length + 1),
        type: 'parent',
        nodes: []
    });

    // You just pushed the new item into your tree, now we have to somehow reference it
    // within our DOM (getting the HTML version of it)
    // Please see STEP 2 before reading here - come back once you did that

    // ---------------------------------------------------------------------
    // Now get the newest element from our tree and convert it to an angular element
    var lastItem = $scope.data[$scope.data.length - 1];

    // Convert to an angular element (added timeout so we can catch the newly rendered item onto DOM - if no timeout, you can't query the item)
    var t = setTimeout(function() {
        console.log(angular.element(document.querySelector('#menu-item-' + lastItem['id'])));
        clearTimeout(t);
    }, 150);

};

[第 2 步] 在您的 HTML

<div ng-controller="DummyController">
    <div ui-tree>
        <button ng-click="newMenuItem()">Add new item</button>
        <ul class="menu" ui-tree-nodes ng-model="data">
            <!-- As you can see, I've put the item's ID so I can reference it back into my controller -->
            <!-- Now go back to your controller and see how you do that -->
            <li ng-repeat="item in data" ui-tree-node data-type="{{item.type}}" id="menu-item-{{item.id}}">
                <a href="#">{{item.title}}</a>
            </li>
        </ul>
    </div>
</div>

angular-ui-tree：如何获取最后添加的节点的html元素

angular-ui-tree: How to get html element of last added node

angularjs

angular-ui-tree