javascript - 从深层嵌套指令调用父作用域函数

Question

我有一个无限嵌套的数据结构，其中有一个顶级对象，它有一个对象集合，并且每个对象也可以有一个对象集合。

我需要迭代这棵树，我目前正在这样做:

集合.js

app.directive('collection', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      collection: '='
    },
    templateUrl: 'collection.html'
  };
});

集合.html

<ul>
  <member ng-repeat="member in collection" member="member"></member>
</ul>

成员.js

app.directive('member', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      member: '='
    },
    templateUrl: 'member.html',
    link: function(scope, element, attrs) {
      var collection = '<collection collection="member.children"></collection>';

      if (scope.member.children) {
        $compile(collection)(scope, function(cloned, scope) {
          element.append(cloned);
        });
      }
    }
  };
});

成员(member).html

<li>
  {{ member }} 
</li> 

index.html

<div data-ng-controller="collectionController">
  <collection collection="collection"></collection>
</div>

我需要能够单击一个成员，无论它是如何嵌套的，并将 Controller 的 selectedMember 属性设置为该成员。

所以像这样:

app.controller('collectionController', function($scope, collection) {

  collection.getCollection().then(function(collection) {
    $scope.collection = collection;
  });

  $scope.selectMember = function(member) {
    $scope.selectedMember = member;
  };

});

由于我正在调用父作用域( Controller )中定义的函数，因此我认为我需要像这样传递 selectMember 函数:

index.html

...
<collection collection="collection" select-member="selectMember"></collection>
...

集合.html

<member ng-repeat="member in collection" member="member" 
  select-member="selectMember()" ng-click="selectMember(member)">
</member>

集合.js

...
scope: {
  collection: '=',
  selectMember: '&selectMember'
}
...

成员.js

...
scope: {
  member: '=',
  selectMember: '='
}
...

我似乎无法正确触发该函数并设置 Controller 范围的 selectedMember 属性。传递给 selectMember 函数的参数未定义。

我认为很明显我对范围有一些误解，但是我必须解决的问题的嵌套性质并没有让事情变得更容易。

有什么想法吗？

编辑: 这是一个笨蛋:http://plnkr.co/edit/JfxpoLLgpADs9RXSMife

Answer 1

是的，我认为您采取的方法是正确的 - 即从外部范围传递点击处理程序。对于如何传递处理程序，只是存在一些小小的困惑。我希望你创造了一个笨蛋，但我会试着变得盲目。 :)

index.html

<collection collection="collection" select-member="selectMember(member)"></collection>

collection.html模板

<member ng-repeat="item in collection" 
        member="item" 
        select-member="selectMember({member: member})"></member>

collection.js

...
scope: {
  collection: '=',
  selectMember: '&'
}
...

member.html模板

<li ng-click="selectMember({member: member})>{{ member }}</li> 

此外，当您添加<collection>时对于 member.children :

<collection collection="member.children" 
            select-member="selectMember({member: member})"></collection>

member.js

...
scope: {
  member: '=',
  selectMember: '&'
}
...

编辑:

好吧，这不是小事:)但是很有趣。

一些修改:

1. select-member不应该只是像我错误地建议的那样“传递函数”。
2. ng-click当它在 member 上声明时没有正确触发- 它为 child 和 parent 双方开火。我将其移至member.html 模板。
3. 为了清楚起见，我使用了 item与 ng-repeat :ng-repeat="item in collection"

我正在更正上面的代码。我还创建了一个你的 fork plunker .