2016-08-30 5 views
-2

변경 탭을 사용하여 버튼을 클릭

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>

내가 버튼을 클릭 할 때 "저장 & 다음"그것은 탭 2로 이동해야 내가 저장 & 뒤로 버튼의 작품을 잘 클릭하면 반전이 발생한다 때 두 버튼 모두에 공통 컨트롤러를 사용했습니다. 하지만 같은 다른 컨트롤러와 함께 사용하려면 예 Mytrl1 & Mytrl2

답변

0

당신이 다른 컨트롤러에서 수행되도록하려면 여기에 두 가지가 있습니다 :

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. 
+0

감사 @Suneet 도움이 될 것입니다을 방출보기

  • 사용 $에이를 사용, 나는 그래서 위의 코드에 추가하세요 각도에서 새로운 오전하는 내가 이해하도록 도와 줘. – Pravin

  • 0
    1. 은 동일한 기술을 사용할 수 있습니다 어제 다른 포스트에서 설명했듯이. 그러나 myIndex는 $ rootscope에 있어야합니다.

    2. 두 팩트, decrementTabIndex 및 incrementTabIndex가 들어있는 서비스를 만듭니다 (공장 출하 선호). 또한 현재 값을 반환해야합니다. 그런 다음 두 컨트롤러에 서비스를 삽입하고 범위에 바인딩합니다. -> & $ 기법에 다음 링크는 당신에게 Working with $scope.$emit and $scope.$on