Question

我有一个属于控制器B的按钮和两个HTML代码块，它们属于控制器A ...............并且按钮属于一个HTML代码块< / p>

示例：

    <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 varibales ......我应该使用什么???

Answer 1

希望这有助于......！

＆＃13;

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) {

  });

＆＃13;

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

＆＃13;

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服务是一个singelton，因此它将在不同的控制器，指令或页面中保存您的值。

也可以直接使用：

// 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;
  }
});

我已经在一个plunker中的不同div（现在和以后）中实现了一个按钮，

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

希望这有帮助！

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

3 个答案: