角度隐藏指令取决于另一个指令中的操作答案

【问题标题】：Angular hide dirrective depending on action in another directive角度隐藏指令取决于另一个指令中的操作
【发布时间】：2016-06-15 00:06:19
【问题描述】：

我是 Angular 的新手，我正在寻找做我想做的最好的方法。

在我的主页中，我有 2 个指令，一个用于显示按钮（可能还有其他内容）。另一个用来显示一种对话框/菜单。

每个指令都有自己的控制器。

当我单击第一个指令中的按钮时，我想显示或隐藏第二个指令。

我真的不知道什么是商品或错误的方法。我应该使用注入两个控制器的服务并在第二个指令中使用 ng-show 设置变量吗？这个解决方案并没有真正隐藏指令，因为我需要在指令中添加一个 div 来隐藏它的内容，并且只为一个布尔值使用服务并不过分？

我应该使用一种全局变量（rootscope？）还是将第一个控制器注入到第二个控制器中？

或者可能在我的主页中使用第三个控制器（与服务一起使用？）或者只对两个指令使用一个控制器？

基本上没有指令，我可能只对整个页面使用一个主控制器并设置一个变量。

【问题讨论】：

我可能会为您的指令执行两种方式绑定，该指令在您用于主页的控制器范围上显示具有模型属性的按钮（通常是处理 ng-app 的任何内容。此模型属性可以然后附加到主页中的其他指令声明（例如，ng-show=model.property）

标签： angularjs angularjs-directive

【解决方案1】：

事实上，第一个指令只是一种用于显示“某物”的按钮，而第二个指令只是一种等待布尔值显示的弹出窗口。这就是为什么我最终使用了一个包含带有 getter 和 setter 的布尔值的服务来避免两个控制器之间的任何交互。

我的两个控制器都使用此服务，第一个控制器在我们单击元素时设置值，第二个控制器仅为我的 ng-show 的 getter 提供可见性。

我不知道这是否是最好的方法，但我现在很满意。

这里的小例子（没有指令但具有相同的逻辑）： http://codepen.io/dufaux/pen/dXMrPm

angular.module('myModule', []);

angular.module("myModule")
  .controller("ButtonCtrl", buttonCtrl)
  .controller("PopUpCtrl", popUpCtrl)
  .service("DisplayerService", displayerService);

//ButtonCtrl
buttonCtrl.$inject = ["DisplayerService", "$scope"];
function buttonCtrl(DisplayerService, $scope) {
  var vm = this;
  vm.display = function(){
     DisplayerService.setDisplay(!DisplayerService.getDisplay());
  }
}

//PopUpCtrl
popUpCtrl.$inject = ["DisplayerService"];
function popUpCtrl(DisplayerService) {
  var vm = this;

  vm.displayable = function(){
    return DisplayerService.getDisplay();
  }
}

//Service
function displayerService(){
  var vm = this;
  vm.display = false;

  vm.setDisplay = function(value){
    vm.display = value;
  }

  vm.getDisplay = function(){
    return vm.display;
  }
}

<body data-ng-app="myModule">
    <div data-ng-controller="ButtonCtrl as btnCtrl" >
      <button data-ng-click="btnCtrl.display()">
        display
      </button>
    </div>
    [...]
    <div data-ng-controller="PopUpCtrl as popUpCtrl" >
      <div data-ng-show="popUpCtrl.displayable()">
        hello world
      </div>
    </div>
</body>

【讨论】：