AngularJS指令范围继承

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链接

我遇到了将$scope.selectedNode设置为全局样式的问题，现在如果单击树节点，css样式看起来不正确，因为$scope.selectedNode只影响treeChildren指令中它自己的范围。

如何从主指令作用域继承作用域？因为我希望每个节点单击都能访问全局$scope.selectedNode。

我读了一些关于理解范围的书，但仍然感到困惑。

希望我能解释清楚，因为我的英语很差

Answer 1

您的代码有一些错误。与其浏览它们，我建议在控制器上尝试使用别名语法。

它将简化你的代码，并可能澄清你试图做什么

别名语法避免了直接注入$scope，并使使用的控制器更加清晰。

看看这个很棒的解释。

我希望它能有所帮助。