Question

var app=angular.module('BlankApp', ['ngMaterial']);
app.controller("Mytrl1", function ($scope) {       
    
});
app.controller("Mytrl2", function ($scope) {    
    
});

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>   
 
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>     
  
    <div ng-cloak>
                    <md-content >
                        <md-tabs md-dynamic-height md-border-bottom md-selected="myTabIndex">
                            <md-tab label="one" >
                                <md-content class="md-padding">
                                    <h1 class="md-display-2">Tab One</h1>
                                  <div ng-controller='Mytrl1'>  
                                    <md-button class="md-raised" ng-click="myTabIndex = myTabIndex+1">Save & Next</md-button>
                                    </div>
                                </md-content>
                            </md-tab>
                            <md-tab label="two" >
                                <md-content class="md-padding">
                                    <h1 class="md-display-2">Tab Two</h1>
                                          <div ng-controller='Mytrl2'>  
                                    <md-button class="md-raised" ng-click="myTabIndex = myTabIndex-1">Save & Back </md-button>
                                            </div>
                                  
                                </md-content>
                            </md-tab>
                        </md-tabs>
                        </md-content>
                    </div>

</body>
</html>

当我点击“Save＆amp; Next”按钮时，它应该转到Tab 2，当我点击Save＆amp;当我对两个按钮使用通用控制器时，它的工作正常。但我想使用不同的控制器，例如Mytrl1＆amp; Mytrl2

Answer 1

There are two approaches here if you want it to be done in different controllers:

1. Make myTabIndex as the part of $rootScope. So it should look like $rootScope.myTabIndex in the controller. 

2. Use $emit & $on technique
   --------------------------
   From the Child Contoller on button click just **emit** some message and capture it in Parent Controller through **$on** and do whatever you want.

Answer 2

你可以使用相同的技术，就像我昨天在你的另一篇文章中描述的那样。但myIndex必须在$ rootscope
创建一个服务（我更喜欢工厂），它包含两个函数：decrementTabIndex和incrementTabIndex。他们也应该返回当前值。然后将服务注入两个控制器并将它们绑定到范围。 - ＆GT;在视图上使用它们
使用$ emit＆amp; $ on技术，以下链接将帮助您 Working with $scope.$emit and $scope.$on

使用按钮单击更改选项卡

2 个答案: