javascript - AngularJS 中同一页面上具有不同 Controller 的同一模板

Question

我在 AngularJS 的同一页面上使用具有不同 Controller 的相同模板时遇到问题。

假设我有一个与 Controller A 一起使用的面板模板 PANEL。

A 有一个方法 doSomething() ，它在范围内。当我单击面板按钮时，PANEL 会调用此方法。

我想复制此面板，并在 Controller 中进行细微更改，因此我向此页面添加另一个面板，即带有 Controller B 的面板。

B也有这个方法doSomething()。

我注意到，当我单击附加到 Controller B 的面板中的按钮(使用指令)时，它会调用 Controller A 中的 doSomething() 。发生这种情况的原因可能是 Controller A 的 doSomething() 和B 都在有意义的范围内。

问题是如何才能让它正常工作？ 我知道我可以使用 ng-if 或其他一些影响 HTML 的原因来做到这一点，但是有没有一种优雅的方法来做到这一点？

Answer 1

首先想到的一件事是使用 ui-router 并在 Controller 的方法中检查您所处的“状态”并为每个状态执行不同的操作。

即。在您的方法中，有两种状态，panelA 和 panelB，如下所示:

method() {
  if ($state.current.name === 'panelA') {
    do_something_for_panel_A();
  }
  if ($state.current.name === 'panelB') {
    do_something_for_panel_B();
  }
}

Ofc，我建议为每个“状态”使用一个单独的模板，每个模板都有自己的 Controller 。但设计是个性化且基于项目的，所以这取决于您。