AngularJS : 탭 선택을 보는 방법?

Question

는 I는 GoogleMap으로가 SomePage.html

제 창의

<tabs> 
    <pane title="Datos Generales"> 
     <div ng-include src="'/resources/js/page/running/admin/templates/update-data.html'"></div> 
    </pane> 
    <pane title="Localización"> 
     <div ng-include src="'/resources/js/page/running/admin/templates/update-location.html'"></div> 
    </pane> 
    <pane title="Datos Contacto"> 
     <div ng-include src="'/resources/js/page/running/admin/templates/update-contacts.html'"></div> 
    </pane> 
    <pane title="Variantes"> 
     <div ng-include src="'/resources/js/page/running/admin/templates/update-variants.html'"></div> 
    </pane> 
</tabs> 

AngularJS와 탭 창 예 요소

angular.module('components', []). 
    directive('tabs', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: function($scope, $element) { 
       var panes = $scope.panes = []; 

       $scope.select = function(pane) { 
        angular.forEach(panes, function(pane) { 
         pane.selected = false; 
        }); 
        pane.selected = true; 
       } 

       this.addPane = function(pane) { 
        if (panes.length == 0) $scope.select(pane); 
         panes.push(pane); 
        } 
       }, 
       template: 
        '<div class="tabbable">' + 
         '<ul class="nav nav-tabs">' + 
          '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
           '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
          '</li>' + 
         '</ul>' + 
         '<div class="tab-content" ng-transclude></div>' + 
        '</div>', 
       replace: true 
      }; 
     }). 
    directive('pane', function() { 
     return { 
      require: '^tabs', 
      restrict: 'E', 
      transclude: true, 
      scope: { title: '@' }, 
      link: function(scope, element, attrs, tabsCtrl) { 
       tabsCtrl.addPane(scope); 
      }, 
      template: 
       '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
       '</div>', 
      replace: true 
     }; 
    }) 

을 사용하고있다. 두 번째 창이 선택되면 Google지도를 새로 고침하고 싶습니다.

컨트롤러에서 선택한 창을 얻는 방법을 모르겠습니다. 나는 $scope.panes을 시도했지만 여기 undefined

Answer 1

입니다했습니다 당신이 당신의 문제를 해결할 수있는 세 가지 방법은 다음과 같습니다

1. 는 컨트롤러의 메소드를 정의 탭 요소의 특성에서 그 방법을 지정을의 '&를 사용 '구문을 탭 지시문의 분리 된 범위 정의에 적용하여 지시문이 선택 될 때 지정된 메소드를 호출 할 수있게합니다.
2. 컨트롤러의 범위에서 "selectedPane"속성을 사용하여 개체를 정의하십시오. 양방향 데이터 바인딩을 사용하려면 tabs 지시문의 격리 범위 정의에서 '='sytnax를 사용하십시오. 창을 선택할 때마다이 속성을 설정하십시오.
3. 에는 $emit이라는 탭 지시문이 있고 $ controller를 사용하여 컨트롤러에서 수신 대기하도록합니다.

업데이트 : 옵션에 대한 자세한 내용은 요청 @qopuir 1.
컨트롤러 방법은 다음과 같은 것입니다 가정 : 탭 요소에

$scope.paneChanged = function(pane) { 
    $scope.selectedPane = pane 
    ... 
} 

, 우리는이 기능을 지정할 수 있습니다 속성 pane-changed로 :

<tabs pane-changed="paneChanged(selectedPane)"> 

그런 다음, 탭 지시어는 '을 사용할 수 있습니다'이 메서드를 호출하는 구문은 다음과 같습니다.

.directive('tabs', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { paneChanged: '&' }, 
     controller: function($scope, $element) { 
      var panes = $scope.panes = []; 

      $scope.select = function(pane) { 
       angular.forEach(panes, function(pane) { 
        pane.selected = false; 
       }); 
       pane.selected = true; 
       $scope.paneChanged({selectedPane: pane}); 
      }