AngularJS Directive сфера наследования

Question

Я пытаюсь создать угловую директиву дерева, вот коды:

//** Tree constructor 
var Tree = function() { 
    return { 
    restrict: 'EA', 
    replace: true, 
    template: "<ul>" + 
       "<li ng-repeat=\"node in node.children\">" + 
       "<a ng-click=\"selectNode(node)\" ng-class=\"{selected: isSelected(node)}\">" + 
        "{{node.name}}" + 
       "</a>" + 
       "<tree-children></tree-children>" + 
       "</li>" + 
       "</ul>", 
    scope: { 
     treeData: '=' 
    }, 
    controller: function($scope) { 
     //** Selected Node 
     $scope.selectedNode = null; 

     //** Node on click 
     $scope.selectNode = function(node) { 
      if ($scope.selectedNode !== node) { 
       $scope.selectedNode = node; 
      } else { 
       $scope.selectedNode = null; 
      } 
     }; 

     $scope.isSelected = function(node) { 
      return (node === $scope.selectedNode); 
     } 

    }, 
    link: function(scope, elem, attrs) { 

     //** Watch 
     scope.$watch('treeData', function(data) { 
     if (angular.isArray(data)) { 
      scope.node = {}; 
      scope.node.children = data; 
     } else { 
      //*********** 
     } 
     }); 
    } 
    } 
} 

//** Tree children constructor 
var TreeChildren = function($compile) { 
    return { 
    restrict: 'E', 
    link: function(scope, elem, attrs) { 

     var childScope = scope.$new(), 
      template = '<tree tree-data="node.children"></tree>', 
      content = $compile(template)(childScope); 

     //** Append 
     elem.append(content); 
    } 
    }; 
}; 

TreeChildren.$inject = ['$compile']; 

//** Angular Module 
angular 
.module('app', []) 
.directive('tree', Tree) 
.directive('treeChildren', TreeChildren) 
.controller('treeCtrl', ['$scope', function($scope) { 
    $scope.treeData = [ 
     { 
      name: 'Root', 
      children: [ 
       { 
        name: 'Node-1', 
        children: [ 
         { name: 'Node-1-1'}, 
         { name: 'Node-1-2'}, 
         { name: 'node-1-3'} 
        ] 
       }, 
       { 
         name: 'Node-2', 
         children: [ 
         { name: 'Node-2-1'} 
         ] 
       } 
      ] 
     } 
    ]; 
}]); 

Plunker link

Я получил проблемы создания $scope.selectedNode быть Global один, теперь, если щелкнуть по узлу дерева, стиль css выглядит не так, как $scope.selectedNode влияет только на его собственную область действия в директиве treeChildren.

Как мне наследовать сферу действия из основной области действия? поскольку я хочу, чтобы каждый щелчок узла получил доступ к Global$scope.selectedNode.

Я сделал некоторое чтение на Understanding Scopes, но все еще путать.

Надежда Я четко объяснить, как мой бедный английский

Answer 1

Есть несколько вещей неправильно с вашим кодом. Вместо того, чтобы проходить через них, я предлагаю попробовать использовать синтаксис псевдонима на вашем контроллере.

Это упростит ваш код и, возможно, уточнит, что вы пытаетесь сделать.

Синтаксис псевдонимов позволяет напрямую вводить $ scope и делает более понятным, какой контроллер он использует.

Check this awesome explanation out.

Надеюсь, это поможет.