Question

我正在尝试创建具有隔离范围的treeview指令。

但节点选择无法正常工作：

指令

(function(l) {
    l.module("angularTreeview", []).directive("treeModel",
        function($compile) {
            return {
                restrict: "A",
                scope: {
                    treeModel: '=',
                    currentNode: '='
                },
                link: function(scope, element) {
                    k = '<ul><li data-ng-repeat="node in treeModel"><i class="collapsed" data-ng-show="node.children.length && node.collapsed" data-ng-click="selectNodeHead(node)"></i><i class="expanded" data-ng-show="node.children.length && !node.collapsed" data-ng-click="selectNodeHead(node)"></i><i class="normal" data-ng-hide="node.children.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node)">{{node.roleName}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.children" data-node-id="roleId" data-node-label="roleName" data-current-node="currentNode" data-node-children="children"></div></li></ul>';

                    scope.$watch('treeModel', function() {
                            element.empty().html($compile(k)(scope))
                        }),
                        scope.selectNodeLabel = function(q) {
                            scope.currentNode && scope.currentNode.selected && (scope.currentNode.selected = false);
                            q.selected = "selected";
                            scope.currentNode = q
                        };
                }
            }
        })
})(angular);

Problem Fiddle

任何帮助都会表示赞赏，谢谢。

Answer 1

问题是因为您多次编译指令，每次编译指令时都有不同的子范围。现在这不是一个真正的问题，但是每个子节点更改为currentNode都会更改引用，但不会更新其所有父节点范围，这意味着原始currentNode不会更新。

相反，您可以通过一个对象访问currentNode，这将保证每次更改都会保持参考原样：

// controller
$scope.obj = { currentNode :{} };

// directive
scope.currentNode.currentNode=q; // every line with scope.currenNode becomes scope.currentNode.currentNode for example.

请参阅此fiddle

与孤立范围的Angularjs TreeView指令

1 个答案: