AngularJS如何从另一个控制器调用div上的ng-show

Question

我是 AngularJS 的新手，并试图在企业项目中使用它。 到目前为止，我已经跨越了许多障碍，但每天都有它的问题！ 拜托，我需要你的帮助。

此屏幕上的功能是一个两步过程。 首次加载页面时，会显示并填充 div1。 但是，div2 只显示一个按钮。

然后，当用户单击 div2 中的按钮时，div2 将由来自服务器的信息填充。 所以，我们最终在屏幕上显示了 div1 和 div2。 这 2 个 div 具有独特的 angularjs 控制器。

我的问题是当用户点击 div1 中的链接 (toggleDiv2) 时如何显示和隐藏 div2。

需要显示/隐藏才能重新开始处理，即单击链接 (toggleDiv2) 会使用一组新的 html 控件重新填充 div1，以便调用新的 Web 服务来填充 div2。 我已经尝试简化场景。

我已使用服务在控制器之间共享数据并在同一控制器内完成显示/隐藏。 但是，这个是在多个控制器之间显示/隐藏，它打败了我哦！ 任何帮助将不胜感激。 谢谢。

<div id="div1" ng-controller="EventSourceCtrl">

         <a id="toggleDiv2" href="#" ng-  click="functionDefinedInEventDestinationCtrl('false');"> Close Div named myDiv </a>

</div>

<div id="div2" ng-show="someFlagOrFunctionInaControllerOrService" ng-controller="EventDestinationCtrl">

    <button id="buttonId" type="button" ng-click="getInfoFromServerToPopulateDiv2()" class="btn"></button>

</div>

Answer 1

您只需将 EventSourceCtrl 中的标志设置为 true

// js

app = angular.module('app', [])

app.controller('EventSourceCtrl', function($scope) {
  $scope.functionDefinedInEventDestinationCtrl = function () {
    $scope.someNameSpace || ($scope.someNameSpace = {});
    $scope.someNameSpace.someFlagOrFunctionInaControllerOrService = true;
  }
});

// html

<div id="div2" ng-show="someNameSpace.someFlagOrFunctionInaControllerOrService" ng-controller="EventDestinationCtrl">