Question

我正在努力在嵌套指令中调用父控制器函数，该指令以递归方式编译自身。单击tree-item中的按钮可以深入一级，但之后doc和type的变量未定义。

这种类型的问题可以通过React轻松解决，但我认为每个函数传递都会创建新的范围，而实际上我只想从父级传递回调引用。

我认为这可以通过发布事件来解决，这是一个坏/好主意吗？

父控制器方法：

displayDocument(doc, type) { /* */ }

传递到tree指令：

<tree display-document="vm.displayDocument(doc, type)"></tree>

Tree定义：

function Tree() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'components/ui/biospecimen/templates/tree.html',
    scope: {
      displayDocument: '&',
    }
  }
}

从tree-item传递到tree.html指令：

<tree-item display-document="displayDocument(doc, type)"></tree-item>

TreeItem定义：

function TreeItem($compile) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'components/ui/biospecimen/templates/tree-item.html',
    scope: {
      displayDocument: '&',
    },
    link: (scope, el, attrs) => {
      el.append($compile([
        '<tree',        
          'data-ng-repeat="childType in [\'foo\', \'bar\']"',
          'display-document="displayDocument(doc, type)"',
        '></tree>'
      ].join(' '))(scope))
    }
  }
}

然后最终在tree-item内使用：

<button data-ng-click="displayDocument({ doc: doc, type: type })">Click</button>

Answer 1

你几乎就在那里。您的问题是，当您从指令调用函数时，必须将其传递给对象，就像将对象从树项目传递到树时一样。然后Angular在树指令中调用函数，如下所示：

displayDocument(doc, type)

问题是这个函数也在一个指令里面！它必须以同样的方式调用，如下所示：

displayDocument({ doc: doc, type: type })

因此，如果必须使用一个参数（即对象{doc：doc，type：type}）调用tree指令中的函数，那么当您从树项调用它时，必须像这样在模板中写出：

<tree-item display-document="displayDocument(args)"></tree-item>

（或任何其他名称，而不是＆＃39; args＆＃39;）并像这样调用它：

<button data-ng-click="displayDocument({args: { doc: doc, type: type }})">Click</button>

我创建了一个与你的情况类似的工作js fiddle

在嵌套递归指令中将参数传递给父控制器方法

1 个答案: