在两个不同的控制器之间传递 ng-show

Question

>我有一个落入控制器 B 的按钮和两个属于控制器 A 的 HTML 代码块......和按钮落入一个 HTML 代码块

例：

<div ng-controller="A">
<div ng-show="now">
<div>
<Button ng-controller="B"></Button>
</div>
</div>
<div ng-show="later">
</div>
</div>

在一个按钮单击上，我现在显示阻止，后来在按钮单击B控制器时，我现在隐藏阻止并显示稍后阻止。

如何实现此功能？我无法在两个不同的控制器文件之间传递 ng-show 变体......我应该使用什么???

Answer 1

希望这有帮助...！

angular.module('app', [])
.controller('A', function($scope) {
console.log('A');
$scope.state = {
now: true
};
$scope.showLater = function() {
$scope.state.later = true;
};
})
.controller('B', function($scope) {
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="A" ng-app="app">
<div ng-show="state.now">
<div>
<button ng-controller="B" ng-click="showLater()">Show Later</button>
</div>
</div>
<div ng-show="state.later">LATER
</div>
<p> <pre ng-bind="state | json"></pre>
</p>
</div>

Answer 2

您可以使用存储状态的简单服务。

例：

angular.module('mymodule').service('ActiveService', function() {
var service = {};
var status = false;
service.getStatus = function() {
return status;
}
service.toggle = function() {
status = !status;
}
return service;
})

在控制器中：

angular.module('mymodule').controller('SomeController', function(ActiveService) {
$scope.status = ActiveService.getStatus;
})

Angularjs 服务是一个单克隆，因此它将在不同的控制器、指令或页面中为您保存您的值。

也可以直接使用：

// Controller
$scope.service = ActiveService;
// Html 
<div ng-show="service.getStatus()">
...
</div>

Answer 3

您还可以通过在$rootScope中声明变量并在控制器 A 中观察它来实现这一点，

app.controller('A', function($scope, $rootScope) {
$rootScope.now = true;
$rootScope.later = false;
$rootScope.$watch("now", function() {
$scope.now = $rootScope.now;
$scope.later = !$rootScope.now;
})
});

在控制器 B 中，您只需根据以前的值更改now的值，就像在ng-click上一样，

app.controller('B', function($scope, $rootScope) {
$scope.testBtn = function() {
$rootScope.now = !$rootScope.now;
}
});

我已经在不同的divs(现在和以后)中实现了一个名为按钮，

http://embed.plnkr.co/xtegii1vCqTxHO7sUNBU/preview

希望这有帮助！