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