Angularjs TreeView指令与隔离范围

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未更新。

相反，你可以通过一个对象，这将保证每一个变化将保持referencs因为他们访问currentNode：

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

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

看到这个fiddle