Question

我在AngularJS的同一页面上使用与不同控制器相同的模板时遇到问题。

假设我有一个面板模板PANEL，我与控制器A一起使用。

A有一个方法doSomething（）在范围内。当我点击面板按钮时，PANEL会调用此方法。

我想通过控制器中的微小更改复制此面板，因此我在此页面添加了另一个面板，PANEL与控制器B。

B也有这个方法doSomething（）。

我注意到当我点击连接到控制器B的面板上的按钮（使用指令）时，它会调用控制器A中的doSomething（）。这可能是因为两者都做了控制器A和B的（）在有意义的范围内。

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

Answer 1

首先要考虑的是使用ui-router并在控制器的方法中检查哪个状态＆＃39;你为每个人做了不同的事情。

IE中。在你的方法中有两个状态，panelA和panelB，如下所示：

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

Ofc，我建议为每个州提供一个单独的模板，每个模板都有自己的控制器。但设计是基于个人和项目的，所以由您决定。

Answer 2

我通过使用2个指令并将scope属性设置为true来解决它。

我的2条指令：

angular.module('my-app')
.directive('panelOne', function () {
  return {
    restrict: 'E',
    templateUrl: 'panel.html',
    controllerAs: 'panelCtrl',
    controller: 'PanelOneController',
    scope: true
  };
});

和

angular.module('my-app')
.directive('panelTwo', function () {
  return {
    restrict: 'E',
    templateUrl: 'panel.html',
    controllerAs: 'panelCtrl',
    controller: 'PanelTwoController',
    scope: true
  };
});

一旦我添加了scope: true，每个指令只能在自己的范围内工作。 PanelOne和PanelTwo都可以加载到同一页面上，而不会被另一个页面接管。

AngularJS中同一页面上具有不同控制器的相同模板

2 个答案: