At time of writing (circa 4.7.20
), the crm-ui-tab-set
directive does not support an option to manage the active tab.
I think a patch to support that would be welcome. For example, one might update crm-ui-tab-set
(in ang/crmUi.js
) to support an extra variable active-tab
with an interface like this:
<div crm-ui-tab-set active-tab="selectedTab">
<div id="mytab1" crm-ui-tab crm-title="ts('Tab 1')">
This is Tab 1.
</div>
<div id="mytab2" crm-ui-tab crm-title="ts('Tab 2')">
This is Tab 2.
</div>
</div>
You could then initialize selectedTab
from the controller, e.g.
angular...controller('MyController', function(...){
$scope.selectedTab = "mytab1";
});
or
$routeProvider.when('/foo/{tabName}', {
controller: 'MyController',
resolve: {tabName: function($route){return route.current.params.tabName;}},
...
});
angular...controller('MyController', function(tabName, ...){
$scope.selectedTab = tabName; // Ex: "mytab1", "mytab2"
});
Observation: crm-ui-tab-set
is a thin wrapper for jQueryUI tabs
. It's built with "jQuery Passhthrough" (ui-jq="tabs"
) from angular-ui-utils
(v0.1.x
). Unfortunately, the docs/examples for "jQuery Passthrough" have been scrubbed from angular-ui
's website, but you can find some discussion in archive.org.
Tip: Given that ui-jq
has been deprecated, we should try to limit/contain the jQuery-isms. crm-ui-tab-set
would probably call some jQuery functions, but downstream extensions shouldn't.
Tip: If your UI is built on Bootstrap CSS, then consider replacing crm-ui-tab-set
with uib-tabset
from anguilar-ui-bootstrap
.