AngularJS: jak oglądać wybór tabulatora?

Question

ja przy użyciu karty i przykład szyba angularjs składników

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

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> 

W drugim panelu jest GoogleMap. Chciałbym odświeżyć mapę google po wybraniu drugiego panelu.

Nie wiem, jak uzyskać wybrany panel w kontrolerze. Próbowałem $scope.panes ale jest undefined

Answer 1

Oto trzy sposoby można rozwiązać tego problemu:

1. zdefiniować metodę na kontrolerze, określ tę metodę w atrybucie na elemencie tabs naciśnij '& "składnia w definicji zakresu izolowania zakresu dyrektywy karty, aby umożliwić dyrektywie wywołanie określonej metody po zaznaczeniu panelu.
2. Zdefiniuj obiekt w swoim kontrolerze z właściwością "selectedPane". Użyj '=' sytnax w definicji zakresu izolowania zakresu dyrektywy zakładki, aby włączyć dwukierunkowe wiązanie danych. Ustaw tę właściwość po każdym zaznaczeniu panelu.
3. mają dyrektywę zakładki $emit wydarzenie i niech kontroler nasłuchuje, używając $.

Aktualizacja: @qopuir poprosił o więcej szczegółów na temat opcji 1.
Załóżmy, że metoda kontroler jest coś jak następuje:

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

na elemencie tabs, będziemy określać tę funkcję z atrybutem pane-changed:

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

Następnie dyrektywa zakładki można używać '& 'Składnia do wywołania tej metody:

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