Question

我不想在控制器之间共享数据。我只想在单击选项卡A或选项卡B时触发控制器C.

<body ng-controller="MainController">
   <div class="div1" ng-controller="ControllerA" ng-click="changeTab('tab1')">
    ...
   </div>
   <div class="div2" ng-controller="ControllerB" ng-click="changeTab('tab2')">
    ...
   </div>
   <div class="div3" ng-controller="ControllerC">
    ...
   </div>
</body>

如何做到这一点？任何的想法？

Answer 1

您可以使用事件，其中$scope.$parent.$broadcast是兄弟控制器之间最近的路径：

＆＃13;

angular.module('app', [])
.controller('ControllerA', ['$scope', function($scope){
     $scope.changeTab = function(tab){
         $scope.$parent.$broadcast('myevent', tab);
     }
}])
.controller('ControllerC', ['$scope', function($scope){
    $scope.counter = 0;
     $scope.$on('myevent', function(event, tab){
         $scope.tab = tab;
         $scope.counter++;
     });
}])

＆＃13;

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<body ng-app="app">
  <div class="div1" ng-controller="ControllerA" ng-click="changeTab('tab1')">
    Click ControllerA
   </div>
   <div class="div2" ng-controller="ControllerC">
     ControllerB({{tab}}): {{counter}}
   </div>
</body>

＆＃13;

Answer 2

在您的控制器上注入$rootScope，在changeTab()上注明

$rootScope.$broadcast('key', true);

并在第二个控制器上ControllerC听取

之类的内容

$scope.$on('key', function(response) {
   //code you want to run here
});

Answer 3

$ emit比$ broadcast更好：你可以像下面的代码那样调用控制器。您也可以发送数据。试试这个。

        <div ng-app="myApp" ng-controller="myCtrl"> 

            <button ng-click="sendData();"></button>

        </div>


        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope, $rootScope) {
                function sendData($scope) {
                    var arrayData = [1,2,3];
                    $rootScope.$emit('someEvent', arrayData);
                }

            });
            app.controller('yourCtrl', function($scope, $rootScope) {
                $rootScope.$on('someEvent', function(event, data) {
                    console.log(data); 
                }); 
            });
        </script>

或最简单但不推荐的方式：

<div ng-app="myApp">
    <div class="div1" ng-controller="ControllerA"  ng-show="tab1" ng-click="changeTab('tab1')">
        ...
    </div>
    <div class="div2" ng-controller="ControllerB" ng-show="tab2" ng-click="changeTab('tab2')">
        ...
    </div>
    <div class="div3" ng-controller="ControllerC">
        ...
    </div>
</div>


<script>
    var app = angular.module('myApp', []);
    app.run(function($rootScope) {
        $rootScope.tab1 = true;
        $rootScope.tab2 = false;
    });

    app.controller('ControllerA', function($scope, $rootScope) {
        $scope.changeTab = function (tab) {
            $rootScope.tab1 = true;
            $rootScope.tab2 = false;
        }
    });
    app.controller('ControllerB', function($scope, $rootScope) {
        $scope.changeTab = function (tab) {
            $rootScope.tab1 = false;
            $rootScope.tab2 = true;     
        }
    });
    app.controller('ControllerC', function($scope, $rootScope) {

    });
</script>

如何在AngularJS上触发另一个控制器？

3 个答案: