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

时间:2014-04-29 16:40:01

标签: javascript jquery angularjs angular-ui-bootstrap

我是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>

1 个答案:

答案 0 :(得分: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">