AngularJS: come guardare la selezione delle schede?

Question

Sto usando angularjs scheda ed esempi riquadro componenti

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> 

Nel secondo riquadro c'è un GoogleMap. Vorrei aggiornare la mappa di google quando è selezionato il secondo riquadro.

Non so come ottenere il riquadro selezionato nel controller. Ho provato $scope.panes ma è undefined

Answer 1

Qui ci sono tre modi si potrebbe risolvere il problema:

1. definiscono un metodo sul controller, specificare che il metodo in un attributo sull'elemento schede, utilizzare il '& 'sintassi sulla definizione dell'isolamento dell'isolamento della direttiva tabs per consentire alla direttiva di chiamare il metodo specificato quando viene selezionato un riquadro.
2. definire un oggetto sull'ambito del controllore con una proprietà "selectedPane". Utilizzare systnax '=' nella definizione dell'isolamento dell'isolamento della direttiva tabs per abilitare il collegamento bidirezionale. Impostare questa proprietà ogni volta che viene selezionato un riquadro.
3. hanno la direttiva di tabulazione $emit un evento e il controller deve ascoltarlo utilizzando $ on.

Aggiornamento: @qopuir chiesto per maggiori dettagli circa l'opzione 1.
Supponiamo che il metodo di controllo è qualcosa di simile al seguente:

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

Sull'elemento schede, ci specifichiamo questa funzione con l'attributo pane-changed:

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

Quindi, la direttiva schede possono utilizzare il 'Sintassiper chiamare questo metodo:

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