Refact the new ui tree

- add uiTreeNode directive
- add nodeId or treeId in scope to isolate

This commit fixed the render bug when load node children dynamicly

Author: codedogfish

demo/app.js

@@ -1,21 +1,28 @@
 angularUiTreeDemo = angular.module("angularUiTreeDemo",["angularUiTree"]);
 angularUiTreeDemo.controller("MainCtrl",function($scope){
+    var test = [];
+    test.abc = 123;
     $scope.treeSource = [
         {
             id: 1,
-            name: 'jack'
+            name: 'jack',
+            isOpen: true,
         },
         {
             id: 2,
             name: 'ivan',
+            isOpen: true,
             children: [
                 {
                     id: 3,
                     name: 'ivan`s son',
+                    isOpen: true,
                     children: [
                         {
                             id: 4,
-                            name: 'ivan`s grandson'
+                            name: 'ivan`s grandson',
+                            isOpen: true,
+                            children: test
                         }
                     ]
                 }

src/uiTree.js

@@ -5,36 +5,88 @@
         return {
             restrict: "A",
             scope: {
-                treeSource: "=uiTree"
+                treeSource: "=uiTree",
+                parent: "=nodeParent"
             },
             compile: function(element, attr) {
-                var $nodeTemplate = element.find("[node]").first().remove();
-                var nodeName = $nodeTemplate.attr("node");
+                var nodeStr = element.find("[node]").first()[0].outerHTML;
+                element.find("[node]").first().hide();
 
                 function preLink ($scope, $element, $attr) {
-                
+
                 }
 
-                function postLink ($scope, $element, $attr, ctrl, $transclude) {
+                function postLink ($scope, $element, $attr) {
+                    var $originNode = $element.find("[node]").first();
+                    var $nodeTemplate = $(nodeStr);
+                    var $newNode = $(nodeStr);
+                    var nodeName = $originNode.attr("node");
 
-                    var treeSourceName = $attr["uiTree"].replace(nodeName+".", "");
-                    console.log(treeSourceName);
+                    var treeId = "ui_tree_" + Math.floor((Math.random() * 999999999) + 1);
 
                     function postCompile(){
-                        var $nodeChildrenTemplate = $nodeTemplate.find("[node-children]").first();
-                        var nodeChildrenName = $nodeChildrenTemplate.attr("node-children");
-                        $nodeChildrenTemplate.append($nodeTemplate.clone());
-                        $nodeChildrenTemplate.attr("ui-tree", nodeChildrenName);
-                        var $newNode = $($nodeTemplate[0].outerHTML);
-                        $newNode.attr("ng-repeat", nodeName + " in treeSource")
-                        $element.append($newNode);
+                        $newNode.find("[node-children]").first().append($nodeTemplate);
+                        $newNode.attr("ng-repeat", nodeName + " in " + treeId);
+                        $newNode.attr("ui-tree-node", nodeName);
+                        $originNode.replaceWith($newNode);
+                        $newNode.show();
                         $compile($newNode)($scope);
                     }
 
                     var unwatch = $scope.$watch("treeSource",function(){
-                        if($scope.treeSource) {
+                        if($scope.treeSource && !$scope.$isCompiled) {
+                            $scope[treeId] = $scope.treeSource;
+                            postCompile();
+                            unwatch();
+                            $scope.$isCompiled = true;
+                            $scope.__proto__ = $scope.$parent;
+                        }
+                    })
+                }
+
+                return {
+                    pre: preLink,
+                    post: postLink
+                }
+            }
+        };
+    });
+
+    angularUiTree.directive("uiTreeNode",function($compile){
+        return {
+            restrict: "A",
+            scope: {
+                nodeSource: "=uiTreeNode"
+            },
+            compile: function(element, attr) {
+                var nodeChildrenStr = element.find("[node-children]").first()[0].outerHTML;
+
+                function preLink ($scope, $element, $attr) {
+
+                }
+
+                function postLink ($scope, $element, $attr) {
+                    var $originNodeChildren = $element.find("[node-children]").first();
+                    var $newNodeChildren = $(nodeChildrenStr);
+
+                    var nodeChildrenName = $originNodeChildren.attr("node-children");
+                    var nodeId = "ui_tree_node_" + Math.floor((Math.random() * 999999999) + 1);
+                    var nodeName = $attr["node"];
+                    var treeSourceName = nodeChildrenName.replace(nodeName, nodeId);
+
+                    function postCompile(){
+                        $newNodeChildren.attr("ui-tree", treeSourceName);
+                        $newNodeChildren.attr("node-parent", nodeId);
+                        $originNodeChildren.replaceWith($newNodeChildren);
+                        $compile($newNodeChildren)($scope);
+                    }
+
+                    var unwatch = $scope.$watch("nodeSource",function(){
+                        if($scope.nodeSource && !$scope.$isCompiled) {
+                            $scope[nodeId] = $scope.nodeSource;
                             postCompile();
-                            unwatch();    
+                            unwatch();
+                            $scope.$isCompiled = true
                             $scope.__proto__ = $scope.$parent;
                         }
                     })
@@ -45,6 +97,6 @@
                     post: postLink
                 }
             }
-        };    
+        };
     });
 })();