Question

我正在尝试构建动态树组件，即文件夹结构。我希望孩子们能够动态加载，所以与其他模块相比，期望在初始化期间存在整个结构，我想在需要时加载元素。

因此我将控制器函数绑定到指令。这是我的HTML：

<tree-model data="treedata" load-children="loadTree(n)" />

这定义了tree-model指令

app.directive( 'treeModel', function( $compile, $log, $http ) {
      return {
        restrict: 'E',
        scope: {
          node: '=data',
          loadChildren: '&'
        },
        link: function ( scope, element, attrs ) {
          var template =
            '<ul>' +
              '<li ng-model="node">' +
              '<span ng-switch="node.status">' +
                '<i ng-switch-when="collapsed" class="collapsed" ng-click="selectNodeHead(node)">C</i>' +
                '<i ng-switch-when="expanded" class="expanded" ng-click="selectNodeHead(node)">E</i>' +
                '<i ng-switch-default="" class="normal">N</i> ' +
              '</span>' +
              '<span ng-class="node.selected">{{node.label}}</span>' +
              '<span ng-repeat="c in node.children">' +
                '<tree-model data="c" load-children="loadChildren(n)" />' +
              '</span>' +
              '</li>' +
            '</ul>';

          var repl = function() {
            var newElement = angular.element(template);
            $compile(newElement)(scope);
            element.replaceWith(newElement);
          }

          scope.selectNodeHead = function(selectedNode) {
            if (selectedNode.children && selectedNode.children.length) {
              // Collapse
              selectedNode.children = undefined;
              selectedNode.hasChildren = true;
              selectedNode.status = "collapsed";
            } else {
              // Expand
              scope.loadChildren({n: selectedNode});
              selectedNode.status ="expanded";
              repl();
            }
          };

          repl();
        }
      };
    });

这是我的控制者：

app.controller('MyCtrl',
  function ($scope, $log, $http) {
    $scope.treedata = { "label": "Root", "status": "collapsed", "screen": "Root", "id": "999999", "hasChildren": true };

    $scope.loadTree = function(node) {
      $scope.output = "Node: " + node;
      node.children =[
        { "label": "Child 1", "status": "collapsed", "screen": "Child 1", "id": "999997", "hasChildren": true},
        { "label": "Child 2", "status": "normal", "screen": "Child 2", "id": "999995", "hasChildren": false}
      ];
    };
  });

所以我想以递归方式构建树。这适用于第一个节点，我的控制器函数loadTree()获得预期的node作为输入。但是，在子步骤中，它会调用loadTree()，但不会将node作为参数传递。

这似乎与孤立的范围有某种关系。如果我做

scope.$parent.$parent.loadChildren({n: selectedNode});

而不是

scope.loadChildren({n: selectedNode});

在指令的扩展部分中，参数传递起作用。

以下是展示此问题的傻瓜：http://plnkr.co/edit/i4vDuCd7efmweZ9IZXMD

Answer 1

问题在于如何在指令中调用模板内的方法。它应该像这样调用：

'<tree-model data="c" load-children="loadChildren({n : n})" />'

您的代码略有修改： http://jsfiddle.net/yyankowski/2zcpp/3/

使用AngularJS以递归方式创建的指令中的控制器定义的函数

1 个答案: