AngularJS: how to watch tab selection?

Question

I am using angularjs tab and pane example components ``` 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: '

' + '

'+ '{{pane.title}}' + '

' + '

', replace: true }; }). directive('pane', function() { return { require: '^tabs', restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, template: '

Accepted Answer

Here are three ways you could solve your problem:

- define a method on your controller, specify that method in an attribute on the tabs element, use the '&' syntax on the tabs directive's isolate scope definition to enable the directive to call the specified method when a pane is selected.

- define an object on your controller's scope with a "selectedPane" property. Use the '=' sytnax on the tabs directive's isolate scope definition to enable two-way databinding. Set this property whenever a pane is selected.

- have the tabs directive $emit an event, and have your controller listen for it using $on.

Update: @qopuir asked for more details about option 1. Suppose the controller method is something like the following:

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

On the tabs element, we'll specify this function with attribute `pane-changed`:

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

Then, the tabs directive can use the '&' syntax to call this method:

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

AngularJS: how to watch tab selection?

Solution

Problem