用另一个控制器换行显示 div 不起作用

Question

我在 div 中有一个按钮和一个名为 controllerBubble 的控制器。我希望此按钮显示由另一个控制器控制的 div：controllerDependance。是否可以使用相同的控制器将按钮包装在 div 和隐藏的 div 中，但它不起作用。这是我的 HTML :

<div ng-app="app">

  <div ng-controller="mainController" ng-show="myvalue" class="ng-cloak">
    <div id="panelSap" ng-controller="controllerDependance">
      My hidden div
    </div>
  </div>

  <div id="containerDetailsTicket" class="clearfix" ng-controller="controllerBubble">
    Div which contains the button
    <div id="containerButton" ng-controller="mainController">
      <button ng-click="showAlert()">Afficher</button>
    </div>
  </div>

</div>

这是我的控制器：

var d3DemoApp = angular.module('app', [])
d3DemoApp.controller('controllerBubble', function() {

});

d3DemoApp.controller('controllerDependance', function($scope) {
  $scope.myvalue = false;
  $scope.showAlert = function() {
    $scope.myvalue = true;
  };
});

d3DemoApp.controller('mainController', function AppCtrl($rootScope, $scope) {
  $scope.myvalue = false;
  $scope.showAlert = function() {
    $scope.myvalue = true;
  };
});

我创建了一个 Plunker 知道发生了什么吗？有人可以在 Plunker 上工作。我希望有一个人可以帮助我。非常感谢。

Answer 1

你看，不确定你为什么想要这样的控制器嵌套，但我很确定它不好。我会告诉你为什么。在您的代码中，您试图在两个 DOM ele 上使用同一个控制器。所以，他们有 2 个不同的范围 $scope，所以他们不工作。

我已经使用 $rootScope 为您制作了一个 working plunker，但这不是一个干净的方法，因为您将拥有一个 全局变量 （$rootScope.myvalue) 声明。除非被迫，否则应始终避免声明全局变量。

另一个suggested approach in plunker是使用$emit作为事件通知器。当事件被触发时，$on 会采取适当的行动。您甚至可以将值传递给不同的控制器。

服务也可用于在 controller 之间传递值。

如果您需要更多信息，请告诉我

Update 1:

如果你想删除一些 div（不是隐藏）那么你应该尝试使用 ng-if.

用另一个控制器换行显示 div 不起作用

Show a div by wrap with another controller doesn't work

html

angularjs

angularjs-directive

angularjs-scope

angular-controller